Ändern Sie den Eingabewert nach einer ausgewählten Änderung in jQuery

Question

Ich bin auf der Suche nach einer Möglichkeit, eine Option in meinem Dropdown auszuwählen und die data-item-price und den nächsten Wert input.BOO_item_price durch den Wert zu ändern.

Ich habe dies:

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

ich mit diesem Code versucht habe:

$('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() Blick in unmittelbarem untergeordneten Knoten und select Element nicht input hat als Kind damit Ihr Code didn‘ Das hat funktioniert.

Sie müssen this aktuellen Element Kontext verwenden, bis tr Element mit .closest()/.parents() traversieren. dann .find()input Element

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

Alternativ zum Ziel verwenden, haben Sie auch

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

Answer 2

Eltern() ersten angepaßten Mutter tr und dann find() finden verglichene Element verwenden können finden seine Kindelemente

$('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>