javascript - 如何从选择框获取值到表格？

Question

美好的一天， 我陷入了这个阶段，而且我对 JavaScript 没有足够的经验，在下面的 HTML 中，有一个选择框，其中包括 2 个电话选项(phone1 和 Phone2)以及名为“添加”的表格和按钮
下面的 JavaScript 代码有一个名为 addrow() 的函数 此时，我需要通过按“添加”按钮将我从选择框中选择的选项添加到表格中

例如如果我选择phone1，这意味着它应该显示在表phone1 + 价格中。 之后，如果我改变主意并决定选择phone2，这意味着将隐藏phone1+价格并显示phone2+价格

并且“服务费”费用(两部手机均为 10 美元)应该显示在phone1 和phone2 下

例如如果我选择phone1，这意味着表中显示 电话 1 = 第一个手机 + 价格 = 第二个手机及低于手机 1 的手机服务费 = 第三个手机及低于价格的手机服务费成本 = 第四个手机

如果我选择phone2，同样的事情

电话 2 = 第一个手机 + 价格 = 第二个手机及低于手机 2 的手机服务费 = 第三个手机及低于价格的手机服务费成本 = 第四个手机

预先感谢您的帮助。

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>