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

我需要实现的是在更改选项时分别计算每个数据属性的值（例如，data-staff、data-price、data-km 和 data-call 的单独值），然后在 4 个单独的中显示值输入字段。

我不确定是否可行，但如果有人能帮助我，我将不胜感激

Answer 1

我不确定我是否理解了你的问题，但你可以使用更改侦听器访问这些数据。

$('#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);
     }
   }
})

Answer 2

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

jquery 使用数据属性添加值下拉列表

jquery add values dropdown using data attribute

javascript

jquery

attributes

add

dropdown