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

我需要实现的是在更改选项时分别计算每个数据属性的值（例如，数据人员，数据价格，数据公里和数据调用的单独值），然后在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

＆＃13;

// 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);
});

＆＃13;

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

＆＃13;

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

2 个答案: