jQuery的增加值下拉使用數據屬性

Question

我有一個簡單的HTML表單：

<div class="form-group"> 
<label class="control-label col-md-2">Monday<span class="required"> * </span></label> 
<div class="col-md-5"> 
    <select name="monday_main" id="monday_main_list" class="form-control"> 
     <option value=""></option> 
     <option value="Carlow" data-staff="1" data-price="100" data-km="100" data-call="200" >Carlow</option> 
     <option value="Cavan" data-staff="1" data-price="100" data-km="100" data-call="200" >Cavan</option> 
    </select> 
</div> 
<div class="col-md-5"> 
    <select name="monday_side" id="monday_side_list" class="form-control"> 
     <option value=""></option> 
     <option value="Dublin" data-staff="1" data-price="200" data-km="200" data-call="400" >Dublin</option> 
     <option value="Galway" data-staff="1" data-price="200" data-km="200" data-call="400" >Galway</option> 
    </select> 
</div> 
</div> 

<input type="number" placeholder="" value="" name="amountPrice" id="amountPrice"> 
<input type="number" placeholder="" value="" name="amountKm" id="amountKm"> 
<input type="number" placeholder="" value="" name="amountCall" id="amountCall"> 
<input type="number" placeholder="" value="" name="amountStaff" id="amountStaff"> 

我需要實現的是計算每個數據值分別屬性（如單獨值數據的工作人員，數據價格，數據km和數據調用），然後在4個獨立的輸入字段中顯示值。

我不知道，即使它是可能的，但如果是這樣，我會很感激，如果有人可以幫助我

Answer 1

// good idea to cache elements you'll be re-using 
 
var dropdowns = $('select'), 
 
    inputPrice = $('#amountPrice'), 
 
    inputKm = $('#amountKm'), 
 
    inputCall = $('#amountCall'), 
 
    inputStaff = $('#amountStaff'); 
 
// attach 'onchange' event handler to all dropdowns 
 
dropdowns.change(function() { 
 
    var amountPrice = 0, 
 
    amountKm = 0, 
 
    amountCall = 0, 
 
    amountStaff = 0; 
 
    // for each dropdown, tally amounts 
 
    dropdowns.each(function() { 
 
    // get selected option 
 
    var option = $('option:selected', this); 
 
    amountPrice += parseInt(option.data('price'), 10); 
 
    amountKm += parseInt(option.data('km'), 10); 
 
    amountCall += parseInt(option.data('call'), 10); 
 
    amountStaff += parseInt(option.data('staff'), 10); 
 
    }); 
 
    // set inputs 
 
    inputPrice.val(amountPrice); 
 
    inputKm.val(amountKm); 
 
    inputCall.val(amountCall); 
 
    inputStaff.val(amountStaff); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
<label class="control-label col-md-2">Monday<span class="required"> * </span></label> 
 
<div class="col-md-5"> 
 
    <select name="monday_main" id="monday_main_list" class="form-control"> 
 
     <option value=""></option> 
 
     <option value="Carlow" data-staff="1" data-price="100" data-km="100" data-call="200" >Carlow</option> 
 
     <option value="Cavan" data-staff="1" data-price="100" data-km="100" data-call="200" >Cavan</option> 
 
    </select> 
 
</div> 
 
<div class="col-md-5"> 
 
    <select name="monday_side" id="monday_side_list" class="form-control"> 
 
     <option value=""></option> 
 
     <option value="Dublin" data-staff="1" data-price="200" data-km="200" data-call="400" >Dublin</option> 
 
     <option value="Galway" data-staff="1" data-price="200" data-km="200" data-call="400" >Galway</option> 
 
    </select> 
 
</div> 
 
</div> 
 

 
<input type="number" placeholder="" value="" name="amountPrice" id="amountPrice"> 
 
<input type="number" placeholder="" value="" name="amountKm" id="amountKm"> 
 
<input type="number" placeholder="" value="" name="amountCall" id="amountCall"> 
 
<input type="number" placeholder="" value="" name="amountStaff" id="amountStaff">

Answer 2

我不知道如果我按照你的問題，但你可以訪問到這些數據有變化監聽器。

$('#monday_main_list').on('change', function() { 
    if($(this).val()!=='') { 
    var selectedOption = $(this).find('option[value=' + this.value + ']').first(); 
    if (selectedOption) { 
     var data = selectedOption.data(); 
     console.log(data); 
    } 
    } 
})