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

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(){

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

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

    if (selected_type === "1"){

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

    } 

    if (selected_type === "2"){

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

    }

    fp.value = "";

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

};

wrapper.onchange();

<div id="wrapper">

                <div>

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

                    <select name="product_id" id="select_product" >

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

                

                <div>

                    <label for="lprice">Single Price:</label>

                    <input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>

                </div>

                <div>

                    <label for="count">Count:</label>

                    <input type="number" name="count" id="count" class="form-control" tabindex="1" />

                </div>

</div>

                <div>

                    <label for="price">Full Price:</label>

                    <input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>

                </div>