在jQuery中进行select更改后更改输入值

我正在寻找一种方法，在我的下拉列表中选择一个选项，获取

数据项价格

，并通过该值更改下一个

输入.BOO\u item\u价格

值

我有这个：

<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

元素没有

input

作为子节点，因此代码无法工作

您需要使用

this

当前元素上下文，使用/，遍历最多

tr

元素。然后使用目标

输入
元素

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

查看直接子节点，然后选择
select
元素没有
input
作为子节点，因此代码无法工作

您需要使用
this
当前元素上下文，使用/，遍历最多
tr
元素。然后使用目标
输入
元素

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

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


$（'select.BOO\u item\u id'）。在（'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）；
});

量
项目
价格（桶）
挑选
古柯
(传说中的)精灵
parents（）将找到第一个匹配的父元素
tr
，然后find（）将在其子元素中找到匹配的元素


$（'select.BOO\u item\u id'）。在（'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）；
});

量
项目
价格（桶）
挑选
古柯
(传说中的)精灵
非常感谢您的回复和详细信息。这很有帮助。您的解决方案解决了我的问题。非常感谢您的回复和详细信息。这很有帮助。你的解决方案解决了我的问题。虽然这个代码片段可以解决这个问题，但它确实有助于提高你文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性@RoryMcCrossan是的，需要一点时间来逐个更新。虽然这个代码片段可以解决这个问题，但确实有助于提高您的文章质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性@RoryMcCrossan对，需要一点时间逐一更新。