从下拉数据属性获取值并将其传递到输入字段

Question

I'm trying to pass values that i have stored in a multiple dropdown list to relevant input fields on select. I have gotten it to work to a certain extent but i can't get it to work when the input field and the select drop down is not under the parent div.

Current working code

 $(document).ready(function() { $('.select2').select2(); }); $(document).ready(function() { $('select.material-price').change(function() { var materialValue = $(this).select2().find(":selected").data("price"); $(this).parent('.row').find('.material-total').val(materialValue); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <select class="material-price select2"> <option value="100" value="10">Material A</option> <option data-price="400" value="20>">Material B</option> <option data-price="500" value="30">Material C</option> </select> <input type="text" class="material-total" readonly /> </div> </div> 

Code i'm trying to fix

<div class="row">
  <div class='col-md-2 nopadding'>
    <div class='form-group nomarg'>
      <select class="material-pricex select2">
        <option data-price="100" value="10">Material A</option>
        <option data-price="400" value="20>">Material B</option>
        <option data-price="500" value="30">Material C</option>
      </select>
    </div>
  </div>

  <div class='col-md-1 nopadding'>
    <div class='form-group nomarg'>
       <input type='number' id="total" name="total" min='0' class='form-control'>
    </div>
  </div>     
</div>

How can I get data-price value selected on material-pricex to pass it to the "total" input field?

Answer 1

Problem with your implantation was usage of .parent() which only tragets the direct parent element of the selected element, thus your code didn't worked.

You can use .closest() / .parents() to traverse up-to common ancestor then use .find() to target the desired element.

$(this).closest('.row').find('.material-total').val(materialValue);