Как использовать другой атрибут при изменении второго варианта выбора

Question

Я пытаюсь изменить значение своего поля ввода, изменяя два разных параметра выбора.

Первое поле select - это product_type с двумя разными атрибутами данных в параметрах: data-price и data-price_c.

Второе поле выбора pay_type предназначено для выбора между data-price или data-price_c, чтобы обновить значение lprice.

Это то, что я пробовал:

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>
                <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>
                    <label for="price">Full Price:</label>
                    <input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
                </div>

Answer 1

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