Question

我正在尝试填充输入字段，并且所选选项的值都是动态加载的。我能够加载选定的选项值，并可以在选项更改时更新它。但如果有10个输入字段和10个选择选项标签，我从10个标签中选择一个选项，而不是所有10个输入字段显示相同的值。每个输入字段都有10个选项。我需要单独改变价值。

这是jquery的功能，

$("#myselect").change(function () {
    $( "select option:selected" ).each(function() {
        $('.returnValue').val($( this ).text());
    });
});

我想在输入字段中插入单个产品数量。

我挣扎了两天请求帮助。

<select id="myselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<input class="returnValue" type="text" value="">

Answer 1

使用$(this).parent().next('.returnValue').val($( this ).text());将值设置为下一个输入字段。

$(".myselect").change(function () {
   
    $( "select option:selected" ).each(function() {
        
        $(this).parent().next('.returnValue').val($( this ).text());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<input class="returnValue" type="text" value="">

<select class="myselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<input class="returnValue" type="text" value="">
<select class="myselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<input class="returnValue" type="text" value="">

Answer 2

您的问题是对所有输入字段使用相同的类，您需要为每个输入字段设置不同的id

这里是plunker

Answer 3

您可以通过不同方式解决问题：

如果选择和输入字段是一个接一个，您可以使用：

$(this).next('.returnValue').val($( this ).val());

另一种方法可以基于为每个选择添加一个新属性，如：

input-field="newlass1"

因此，以链接选择和输入字段的方式将新类添加到相应的输入字段。

在这种情况下，您可以这样做：

$('input.' + $(this).attr('input-field')).val($( this ).val());

摘录：

$("[id^=myselect]").change(function () {
  
  
  //$(this).next('.returnValue').val($( this ).val());
  
  
  $('input.' + $(this).attr('input-field')).val($( this ).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<select id="myselect1" input-field="newlass1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<input class="returnValue newlass1" type="text" value=""><br>
<select id="myselect2" input-field="newlass2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<input class="returnValue newlass2" type="text" value=""><br>
<select id="myselect3" input-field="newlass3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<input class="returnValue newlass3" type="text" value=""><br>
<select id="myselect4" input-field="newlass4">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<input class="returnValue newlass4" type="text" value="">

如何使用jquery中的动态选择选项填充动态输入字段

3 个答案: