如何在更改第二个选择选项时使用不同的属性

Question

我试图通过更改两个不同的选择选项来更改输入框的值。

第一个select框product_type在选项上有两个不同的数据属性：data-price和data-price_c。

第二个选择框是在或 之间pay_type进行选择，更新 的值。data-pricedata-price_clprice

这是我试过的：

var sp = document.getElementById('select_product');

var lp = document.getElementById('lprice');

var count = document.getElementById('count');

var fp = document.getElementById('price');

var pt = document.getElementById('paytype');

var selected_type = pt.options[pt.selectedIndex];

sp.onchange = function(){

    var selected = sp.options[sp.selectedIndex];

    if (selected_type === 1){

        lp.value = selected.getAttribute('data-price');

    } else {

        lp.value = selected.getAttribute('data-price_c');

    }

    fp.value = "";

};

sp.onchange();

count.onchange = function(){

    fp.value = lp.value * count.value;

}

                <div>

                    <label for="select_product">Select Product</label>

                    <select name="product_id" id="select_product" onchange="update();">

                        <option value="1" data-price="10000" data-price_c="11000">Product 1</option>

                        <option value="2" data-price="20000" data-price_c="21000">Product 2</option>

                        <option value="3" data-price="30000" data-price_c="31000">Product 3</option>

                    </select>

                </div>

                <div>

                    <label for="paytype">Pay type:</label>

                    <select name="paytype" id="paytype">

                        <option value="1">Cash</option>

                        <option value="2">Dept</option>

                    </select>

                </div>

Answer 1

我希望我正确地低估了您需要从代码和解释中完成的工作：你的第一个问题是你有selected_type你的外部 onchange 功能，所以它没有得到更改的选项 onchange。其次是您尝试将值1 & 2与元素进行比较而不实际从元素中提取这些值（.value缺少selected_type）Pay type我假设您也需要更新更改的值Select Product，所以在这种情况下，将两个 HTML 选择包装到一个 div 中是一个技巧div id="wrapper"，如果它们中的任何一个发生更改，它将监听两个选择和调用函数。所以现在你打电话给它wrapper.onchange。我还建议将您的计算 fp.value = lp.value * count.value;放在这个函数中，以更新任何这些元素发生变化时的总价，因此我将您包装Count:到wrapper div.希望这可以帮助。var sp = document.getElementById('select_product');var lp = document.getElementById('lprice');var count = document.getElementById('count');var fp = document.getElementById('price');var pt = document.getElementById('paytype');var wrapper=document.getElementById('wrapper');wrapper.onchange = function(){&nbsp; &nbsp; var selected = sp.options[sp.selectedIndex];&nbsp; &nbsp; var selected_type = pt.options[pt.selectedIndex].value;&nbsp; &nbsp;&nbsp; &nbsp; if (selected_type === "1"){&nbsp; &nbsp; &nbsp; &nbsp; lp.value = selected.getAttribute('data-price');&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; if (selected_type === "2"){&nbsp; &nbsp; &nbsp; &nbsp; lp.value = selected.getAttribute('data-price_c');&nbsp; &nbsp; }&nbsp; &nbsp; fp.value = "";&nbsp; &nbsp; fp.value = lp.value * count.value;};wrapper.onchange();<div id="wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="select_product">Select Product</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="product_id" id="select_product" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1" data-price="10000" data-price_c="11000">Product 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2" data-price="20000" data-price_c="21000">Product 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3" data-price="30000" data-price_c="31000">Product 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="paytype">Pay type:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="paytype" id="paytype">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">Cash</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">Dept</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="lprice">Single Price:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="count">Count:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="number" name="count" id="count" class="form-control" tabindex="1" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="price">Full Price:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>