更改jQuery中的选择更改后的输入值

Question

我正在寻找一种方法来在我的下拉列表中选择一个选项，并通过该值获取data-item-price并更改下一个input.BOO_item_price值。

我有这样的：

<table class="table table-striped table-bordered listItem"> 
    <tbody> 
    <tr> 
     <th width="20%">Quantity</th> 
     <th width="50%">Item</th> 
     <th width="20%">Price ($ CAN)</th> 
     <th width="10%"></th> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" class="form-control BOO_item_quantity"> 
     </td> 
     <td> 
      <select class="form-control BOO_item_id"> 
       <option value="">Select</option> 
       <option value="18" data-item-price="3">Coca</option> 
       <option value="20" data-item-price="2">Sprite</option> 
      </select> 
     </td> 
     <td> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control BOO_item_price"> 
      </div> 
     </td> 
     <td> 
      <button type="button" class="btn btn-default removeItem"><i class="fa fa-times"></i></button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

我有这个代码的尝试：

$('select.BOO_item_id').on('change', function() { 
    var price = $(this).find(':selected').data('item-price'); 
    $(this).children('input.BOO_item_price').val(price); 
}); 

Answer 1

children()看在眼前子节点和select元素没有input为孩子这样你的代码没”工作。

您需要使用this当前元素上下文，使用.closest()/.parents()遍历到tr元素。然后用.find()目标input元素

$('select.BOO_item_id').on('change', function() { 
    var price = $(this).find(':selected').data('item-price'); 
    $(this).closest('tr').find('input.BOO_item_price').val(price); 
}); 

或者，您也可以使用

$(this).closest('td').next().find('input.BOO_item_price').val(price); 

Answer 2

父母（）会发现第一个匹配父tr然后find（）方法会发现在匹配元素他的孩子元素

$('select.BOO_item_id').on('change', function() { 
 
    var price = $(this).find(':selected').data('item-price'); 
 
    $(this).parents('tr').find('input.BOO_item_price').val(price); 
 
    //$('input.BOO_item_price').val(price); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped table-bordered listItem"> 
 
    <tbody> 
 
    <tr> 
 
     <th width="20%">Quantity</th> 
 
     <th width="50%">Item</th> 
 
     <th width="20%">Price ($ CAN)</th> 
 
     <th width="10%"></th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <input type="text" class="form-control BOO_item_quantity"> 
 
     </td> 
 
     <td> 
 
      <select class="form-control BOO_item_id"> 
 
       <option value="">Select</option> 
 
       <option value="18" data-item-price="3">Coca</option> 
 
       <option value="20" data-item-price="2">Sprite</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <div class="col-sm-12"> 
 
       <input type="text" class="form-control BOO_item_price"> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <button type="button" class="btn btn-default removeItem"><i class="fa fa-times"></i></button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>