javascript - 如何从选择框到表中获取值(value)？

美好的一天，
我现在还停留在这个阶段，还没有足够的JavaScript经验，在下面的HTML中，选择框包括电话（phone1和phone2）的2个选项以及名为“添加”的表格和按钮
下面的JavaScript代码具有一个称为addrow（）的函数。
这时，我需要通过按“添加”按钮来获取我从选择框选择的选项。

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

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

例如如果我选择在表中显示的phone1
phone1 =第一个单元格+价格=第二个单元格，低于phone1单元的服务费=第三单元格，低于价格的单元格服务费，成本=第四单元格

如果我选择phone2，也是一样

phone2 =第一个单元格+价格=第二个单元格，低于phone2单元的服务费=第三单元格，低于价格的单元格服务费，成本=第四个单元格

先谢谢您的帮助。

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>

最佳答案

<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>

Phone1

javascript - 如何从选择框到表中获取值(value)？