Javascript 检索<；选择>；名称多次存在时的表单参数

我有一种情况，我有多个下拉列表，根据情况隐藏或显示。我将始终显示其中一个下拉列表

举个例子，我可能有这样的想法：

<select name="number">
  <option value="1">1</option>
  <option value="11">11</option>
</select>

<select name="number">
  <option value="2">2</option>
  <option value="22">22</option>
</select>

<select name="number">
  <option value="3">3</option>
  <option value="33">33</option>
</select>

1.
11
2.
22
3.
33

根据场景，将显示其中一个下拉列表，而隐藏其他两个下拉列表。假设显示了第一个下拉列表，而隐藏了另外两个。在我的控制器中，我希望检索未隐藏的下拉列表的select值。如何确保参数“number”的值是显示的值，而不是隐藏的值

---

我可以给每个select元素一个不同的名称，但这需要额外的幕后逻辑。这可能是解决方案，但我只是好奇，是否有可能给所有三个select元素赋予相同的名称，并仍然获得（可见的）所选值。

一种方法是存储隐藏字段中显示的下拉框的名称，提交时，您应该在控制器中读取隐藏字段的值，实际上是显示的下拉框。

一种方法是存储隐藏字段中显示的下拉框的名称，并在提交时显示给您应该读取控制器中隐藏字段的值，实际上是显示的下拉列表。

您可以尝试使用jquery

你可以做以下事情

为所有选择的元素指定相同的类名，如class=“number”

然后使用jquery，您可以在select元素之间循环，并找到不隐藏的元素的值

 $('.number').each(function(){
 if($(this).css(display) != 'none'){
  var value = $(this).val();
 }   });

---

顺便说一下。。我不认为在一个表单中有多个同名元素是好的编程实践。…！！：：）

您可以尝试使用jquery

你可以做以下事情

为所有选择的元素指定相同的类名，如class=“number”

然后使用jquery，您可以在select元素之间循环，并找到不隐藏的元素的值

 $('.number').each(function(){
 if($(this).css(display) != 'none'){
  var value = $(this).val();
 }   });

顺便说一下。。我不认为在一个表单中有多个同名元素是好的编程实践。…！！：：）

您可以使用jqueryeq（index）

例如，要检索第一个select的值，可以使用：

var value1 = $('select').eq(0).val();

没有jquery，您可以这样做：

var sel = document.getElementsByTagName("select");
var value1 = sel[0].options[sel[0].selectedIndex].value;

无论如何，您应该使用不同的名称和ID重命名元素。

您可以使用jquery eq（index）

例如，要检索第一个select的值，可以使用：

var value1 = $('select').eq(0).val();

没有jquery，您可以这样做：

var sel = document.getElementsByTagName("select");
var value1 = sel[0].options[sel[0].selectedIndex].value;

---

无论如何，您应该使用不同的名称和ID重命名元素。

首先，我还认为不应该有多个输入字段具有相同的名称，但是，考虑了几秒钟之后，我意识到——特别是单选按钮和复选框的情况下——存在重复名称的情况

我还可以想出几个（复杂的）例子来说明为什么需要几个同名的“select”元素

在OP的情况下，假设在任何给定时刻只有一个“select”可见，那么下面的操作就可以完成了

var selectedValue = $("select:visible").val();

我得说，这很简单，也很容易记住

编辑： 为了防止隐藏的“选择”元素表单与表单一起发布，还应禁用它们

更新：

---

其他答案建议为字段指定唯一的名称-这只会将问题转移到服务器，因为它现在需要决定哪个“选择”值有效。禁用隐藏的名称将阻止它们被发布，但服务器端代码仍必须检查每个名称是否存在，以确定发布了哪个名称。保持名称不变，禁用隐藏元素将产生一个字段，并发布一个一致的名称，使RV端代码无需做出额外决定。

起初，我还认为不应该有多个输入字段具有相同的名称，但考虑了几秒钟之后，我意识到——特别是单选按钮和复选框——有一个很好的重复名称的例子

我还可以想出几个（复杂的）例子来说明为什么需要几个同名的“select”元素

在OP的情况下，假设在任何给定时刻只有一个“select”可见，那么下面的操作就可以完成了

var selectedValue = $("select:visible").val();

我得说，这很简单，也很容易记住

编辑： 为了防止隐藏的“选择”元素表单与表单一起发布，还应禁用它们

更新：

---

其他答案建议为字段指定唯一的名称-这只会将问题转移到服务器，因为它现在需要决定哪个“选择”值有效。禁用隐藏的名称将阻止它们被发布，但服务器端代码仍必须检查每个名称是否存在，以确定发布了哪个名称。保持名称不变，禁用隐藏元素将导致一个字段，并发布一个一致的名称，使RV端代码无需做出额外决定。

+1回答不错，但我将为元素提供唯一的名称。我只是觉得事情可能会简单一些，因为我的页面上的下拉列表数量是动态的。请参见我答案的“更新”部分（本页面的其他地方）+1个不错的答案，不过我会给元素提供唯一的名称。我只是觉得事情会简单一些，因为我的页面上的下拉列表数量是动态的。请参阅我答案的“更新”部分（本页其他地方）