Question

我已经使用了具有相同类填充的多个文本框的概念以及具有相同类的多个下拉选项选项。我在其中遇到问题。当我单击第一个下拉选项然后它更改第二个文本框值.I想要，如果我点击第一个下拉选项，它会更改第一个文本框的值而不是其他，或者如果单击第二个下拉选项，它将更改第二个文本框的值。

<form action="" method="post"> 
    <select name="drop[]" id="budget" class="drop"> 
        <option value="1">option1</option> 
        <option value="2">option2</option>
        <option value="3">option3</option> 
    </select>
    <input type="text" name="txt" id="txt" class="txt" value="text1"><br> 
    <select name="drop[]" id="budget1" class="drop"> 
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option> 
    </select>
    <input type="text" name="txt" id="txt1" class="txt" value="text2">

</form>

$('input[name="txt"]').each(function () { 
    $('.drop').on('change', function(){
        var total = $(this).val();
        $('input[name="txt"]').val($(this).find("option:selected").attr("value")); 
    });
});

Answer 1

您需要找到更改select元素时应更新的下一个输入元素。您可以使用以下代码来实现此目的。

    $('.drop').on('change', function(){
        var total = $(this).val();
        $(this).next("input:first").val($(this).find("option:selected").attr("value")); 
    });

Plunker：https://plnkr.co/edit/qFjuFtwhHBvDE9zxAup2?p=preview

多个文本框填充了jquery中具有相同类的下拉列表选择

1 个答案: