更改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>