foreach 从所选项目中获取值答案

【问题标题】：foreach get value from selected itemforeach 从所选项目中获取值
【发布时间】：2020-10-24 20:06:06
【问题描述】：

如何从所选选项中触发 foreach 值？

我在下面尝试过，但每次都触发了相同的值。

$(".fida").on("change", function() {
  //Getting Value
  var value = $(this).val();
  $(".abi").val(value);
  alert(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fida">
  <option value="0">0</option>
  <option value="666">666</option>
  <option value="777">777</option>
  <option value="888">888</option>
  <option value="999">999</option>
</select>
<input type="text" class="abi" placeholder="get value from selected" />

<select class="fida">
  <option value="0">0</option>
  <option value="777">777</option>
  <option value="888">888</option>
  <option value="999">999</option>
</select>
<input type="text" class="abi" placeholder="get value from selected" />

Jsfiddle：https://jsfiddle.net/abilashu/8mazw2cg/62/

【问题讨论】：

您正在将一个选择的值写入.abi 的两个实例。您的用户名不太合适。
这些表单控件是否包装在父容器中？如果是这样，请为他们显示更高级别的结构。您可以使用索引来定位适用的输入，但使用它们的父包装器通常是最简单和最常见的方法
那些在foreach循环中使用

标签： javascript jquery foreach each

【解决方案1】：

$(".abi") 返回该选择器的所有实例。因此，通过使用$(".abi").val(value)，您可以分配两个input 元素的value。

在您的情况下，您应该使用next() 仅设置select 旁边的input 上的值，而不是.abi 的两个实例。

请注意，这种方式有局限性，并且取决于您的 DOM 结构，我不建议这样做。就像 charlietfl 写的那样，通常最好使用标识符或包装器。

$(".fida").on("change", function() {
  //Getting Value
  var value = $(this).val();
  $(this).next().val(value);
  alert(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fida">
  <option value="0">0</option>
  <option value="666">666</option>
  <option value="777">777</option>
  <option value="888">888</option>
  <option value="999">999</option>
</select>
<input type="text" class="abi" placeholder="get value from selected" />

<select class="fida">
  <option value="0">0</option>
  <option value="777">777</option>
  <option value="888">888</option>
  <option value="999">999</option>
</select>
<input type="text" class="abi" placeholder="get value from selected" />

编辑：

如果您更改 DOM，它会变得更加可靠。例如使用包装器：

$(".fida").on("change", function() {
  //Getting Value
  var value = $(this).val();
  $(this).parent().find(".abi").val(value);
  alert(value);
});

div{display: inline-block}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select class="fida">
    <option value="0">0</option>
    <option value="666">666</option>
    <option value="777">777</option>
    <option value="888">888</option>
    <option value="999">999</option>
  </select>
  <input type="text" class="abi" placeholder="get value from selected" />
</div>

<div>
  <select class="fida">
    <option value="0">0</option>
    <option value="777">777</option>
    <option value="888">888</option>
    <option value="999">999</option>
  </select>
  <input type="text" class="abi" placeholder="get value from selected" />
</div>

【讨论】：

使用 .next() 只是在这里工作，但不是到处工作。
另一种回答方式？
不是您提供的代码。正如答案中所解释的那样。

【解决方案2】：

你可以使用的一个技巧是元素的定位，前提是第一个select元素对应第一个input元素，第二个对应第二个，等：

//Get index of select
let index = $(this).index('.fida');
//Only set value of corresponding input element
$(".abi").eq(index).val(value);

$(".fida").on("change", function() {
  //Getting Value
  var value = $(this).val();
  //Get index of select
  let index = $(this).index('.fida');
  //Only set value on corresponding input element
  $(".abi").eq(index).val(value);
  console.log(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fida">
  <option value="0">0</option>
  <option value="666">666</option>
  <option value="777">777</option>
  <option value="888">888</option>
  <option value="999">999</option>
</select>
<input type="text" class="abi" placeholder="get value from selected" />

<select class="fida">
  <option value="0">0</option>
  <option value="777">777</option>
  <option value="888">888</option>
  <option value="999">999</option>
</select>
<input type="text" class="abi" placeholder="get value from selected" />

【讨论】：