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

【问题标题】：How to populate dynamic input field with dynamic select option in jquery如何在jquery中使用动态选择选项填充动态输入字段
【发布时间】：2016-09-20 01:38:00
【问题描述】：

我正在尝试使用所选选项的值填充输入字段，两者都是动态加载的。我能够加载选定的选项值，并可以在选项更改时更新它。但是如果有 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="">

【问题讨论】：

您的选择器表示所有带有returnValue 类的输入都将被分配，因此，内部循环的最后一次迭代会将所有输入设置为$(this).text() 的最后一个值
您想对所有选择框中选择的所有产品的数量求和？例如。从 select - 1 选择 '3' 和 from select - 2 选择 '4' 然后输入字段的值为 7 等等...

标签： javascript jquery

【解决方案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="">

【讨论】：

首先 id 在 DOM 中应该是唯一的。这就是为什么只有在更改第一次选择时才会填充输入中的 sn-p 值。
@RahulPatel 对，我知道。我只是复制粘贴了同样的东西，然后忘记了，当然。我将对其进行编辑以合并课程。
@RahulPatel 感谢您的提醒。 :) 我应该至少在发布后检查一次。我的错。

【解决方案2】：

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

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

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

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

input-field="newlass1"

然后在相应的输入字段中添加一个新类，以链接选择和输入字段。

在这种情况下你可以做到：

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

sn-p：

$("[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="">

【讨论】：

非常感谢您的帮助。我使用数据库中的产品 id 而不是硬编码 1, 2, 3, 4 ，真正的魔法是 jQuery 再次感谢。
@MirzaAdilAliBaig 非常感谢你。我很高兴看到你高兴。

【解决方案3】：

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

这是plunker

【讨论】：