如何從 select 盒子到表中獲取價值？

Question

美好的一天，我被困在這個階段，我對 JavaScript 沒有足夠的經驗，在下面的 HTML 中有 select 框包括 2 個名為“Addphone”和 button 表的電話選項
下面的 JavaScript 代碼有一個名為 addrow() 的 function 現在我需要通過按“Addrow()”從 select 按鈕框中選擇選項

例如，如果我選擇 phone1，這意味着它應該顯示在 phone1 + price 表中。 之后，如果我改變主意並決定選擇phone2，這意味着將隱藏phone1+price並顯示phone2+price

並且應該在phone1和phone2下顯示“服務費”成本（兩部手機10美元）

例如，如果我選擇 phone1，這意味着在表格中顯示 phone1 = 第一個單元 + 價格 = 第二個單元，並且低於 phone1 單元服務費 = 第三個單元，並且低於價格單元服務費成本 = 第四個單元

如果我選擇phone2也是一樣

phone2 = first cell + price = second cell and under phone2 cell service fee = 第三個 cell and under price cell service fee cost =第四個cell

在此先感謝您的幫助。

 function addRow() { var table = document.getElementById("table"); var row = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var td4 = document.createElement("td"); td1.innerHTML = document.getElementById("phone1").value; td2.innerHTML = document.getElementById("txt3").value = '$275'; td3.innerHTML = document.getElementById("phone2").value; td4.innerHTML = document.getElementById("txt4").value = '$100'; row.appendChild(td1);`enter code here` row.appendChild(td2); table.children[0].appendChild(row); }

 <select id="itemType" name="itemType"> <option id="phone1" value="phone1">phone1</option> <option id="phone2" value="phone2">phone2</option> </select> <div id="txt3"></div> <div id="txt4"></div> <input type="button" value="Add" onclick="addRow()" id="add"><br /><br /> <table id="table" border="1"> <tr> <th>Item</th> <th>Cost</th> </tr> </table>

Answer 1

<select id="itemType" name="itemType">
    <option id="phone1" value="phone1">phone1</option>
    <option id="phone2" value="phone2">phone2</option>
</select>

<input type="button" value="Add" onclick="addRow()" id="add"><br /><br />

<table id="table" border="1">
    <tr>
        <th>Item</th>
        <th>Cost</th>
        <th>Service Charge</th>
        <th>Total</th>
    </tr>
    <tr id="ItemDetail"></tr>
</table>

<script type="text/javascript">
    function addRow() {
        let select = document.getElementById("itemType")
        let price = 0
        let serviceCharge = 10
        if(select.value == "phone1"){
            price = 275
        }
        else if(select.value == "phone2") {
            price = 100
        }

        let data = `<td>${select.value}</td>
                    <td>$${price}</td>
                    <td>$${serviceCharge}</td>
                    <td>$${price + serviceCharge}</td>`

        document.getElementById("ItemDetail").innerHTML = select.value ? data : ''
    }
</script>