How to use different attribute on change the second select option

Question

I'm trying to change the value of my input box by changing two different select options.

The first select box is product_type with two different data attributes on the options: data-price and data-price_c.

The second Select box pay_type is to selecting between data-price or data-price_c, to update the value of lprice.

This is what I've tried:

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

I hope I understated you correctly what needs to be done from code and explanation:

Your first problem was that you had your selected_type outside of you onchange function so it wasn't getting the changed options onchange.

Second is that you where trying to compare values 1 & 2 with element without actually extracting those values from element (missing .value on selected_type)

I assumed you will need to update the values on your Pay type change too as well as Select Product, so there is nit trick to wrap both HTML selects into one div in this case div id="wrapper" and that will listen on both selects and call function if any of them are changed. So now you call it on wrapper.onchange.

I would also advise to put your calculation fp.value = lp.value * count.value; inside this function to update total price on change of any of those elements so I wrapped your Count: into wrapper div.

Hope this helps.

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>