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

【问题标题】：jquery add values dropdown using data attributejquery使用数据属性添加值下拉列表
【发布时间】：2017-07-27 15:50:02
【问题描述】：

我有一个简单的 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 个单独的输入字段中显示值.

我不确定是否可能，但如果可以，如果有人可以帮助我，我将非常感激

【问题讨论】：

标签： javascript jquery attributes add dropdown

【解决方案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">

【讨论】：

Mikey - 你上面的代码工作正常，直到我在表单中添加一些其他“选择”。添加新选择后，代码将停止工作。也许是我的错，我没有提到计算需要之外的其他“选择”。但我认为那些额外的“选择”在某个地方弄乱了你的脚本——我只是不知道在哪里。
我已将 $('select').change(function () { 更改为 $('.calc').change(function () { 现在效果很好

【解决方案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);
     }
   }
})

【讨论】：