代码之家 › 专栏 › 技术社区 › Maevari

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

dropdown add attributes jquery javascript

Maevari · 技术社区 · 9 年前

<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个单独的输入字段中显示值。

2 回复 | 直到 9 年前

Mikey 9 年前

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

serdar.sanri 9 年前

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