JQuery 从动态加载的行数组中选择表单输入值

Question

我有一个表单，我可以在单击按钮时加载表单的多个输入行。每个输入都有一个名称，所以我可以创建一个数组。

例如，我的输入看起来像

<select name='Area[]' onchange='getSame($(this).val(),$("select[name=Rack]").val())' id='MdWd'>
        <options>(options pulled in through php)</select>
<select name='Rack[]' onchange='getSame($("select[name=Area[]]").val(),$(this).val())' id='MdWd'>
        <options>(options pulled in through php)</select>

我最终可以加载多行这些选择器选项。我可以在任何动态加载的行上使用 $(this).val 选择器获取当前行的值。

但我不知道如何从同一行获取姊妹选择器的值（我总共有 4 个）以传递给我的函数。

我已经尝试过 select[name=Rack], select[name=Rack[]]，如图所示。我只试过 [name=Rack]（没有输入）。而且我已经尝试了很多东西，但我无法弄清楚。

因为我允许动态加载行，所以我可以有 1 到 15 行。每次仅更改其中一个的选择时，如何从所有 4 个选择框中获取值？但是从该行获取值？

我希望我解释得足够好。

编辑：

我发现如果我使用

$('select[name^=Rack]').val()

我至少得到了第一行的值。但是，如果我添加第二行或第三行或更多行，我仍然只能从第一行选择选项中获取值。但至少它现在获得了价值。

Answer 1

我建议您创建一个脚本来添加这些输入字段。

.html

<button id="clickme">Append input field</button>
<div id="foo">
  <input type="text" name="name1" placeholder="Your name">
</div>

.js（使用 jQuery）

var field_name = 0;
$('body').on('click','#clickme', function(event) {
  field_name++;
  $('#foo').append('<input type="text" name="name'+field_name+'" placeholder="Your name">');
})

编辑：输入被命名为“name1”、“name2”、...、“nameN”。这样您就可以轻松检索其值。

由于您使用的是 select，请执行与上述相同的过程：

.html

<button id="clickme">Append options</button>
<select id="foo">
</select>

.js

var option = 0;
$('body').on('click','#clickme', function(event) {
  option++;
  ('#foo').append('<option name="'+option+'">Option name</option>')
})

要检索可以在 .js 上使用的值

$("body").on('change','#foo', function() {
  // Code to retrieve values here
});