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

parents（）将找到第一个匹配的父tr，然后 find（）将在其子元素中找到匹配的元素

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: