时间戳

首页 > 解决方案 > 如何在js中获取多个选择列表数据？

javascript - 如何在js中获取多个选择列表数据？

问题描述

<form onsubmit = "return checkForm(this)" method="POST" action = "">
<select name="user[11]">
     <option value='1'>one</option>  
     <option value='2'>two</option> 
</select>

<select name="user[12]">
     <option value='1'>one</option>  
     <option value='2'>two</option> 
</select>

</form>

我需要使用键获取选择框值（我将用于更新用户）

我使用下面的功能

function checkForm(frm){
  var inps = document.getElementsByName('user[]');
  console.log(inps );// but its displaying blank nodelist
}

请提出您宝贵的建议

标签： javascript

解决方案

您可以document.querySelectorAll()为 name 属性使用和通配符：

[name^="user["]

这意味着，查找所有具有以name开头的属性的元素user[。

如果您想从 name 属性中获取键，请像这样映射它：

userArray.map(element => Number(element.name.match(/\d+/)[0]));


let userArray = Array.from(document.querySelectorAll('[name^="user["]'));

let userArrayKeys = userArray.map(element => Number(element.name.match(/\d+/)[0]));

console.log("Matched elements",userArray);

console.log("Their Keys", userArrayKeys);
<form onsubmit="return checkForm(this)" method="POST" action="">
  <select name="user[11]"> <!-- I will get selected -->
    <option value='1'>one</option>
    <option value='2'>two</option>
  </select>

  <select name="user[12]"> <!-- I will get selected -->
    <option value='1'>one</option>
    <option value='2'>two</option>
  </select>
  
  <select name="update[12]"> <!-- I will not get selected -->
    <option value='1'>one</option>
    <option value='2'>two</option>
  </select>
</form>

不过，您应该为输入字段命名，以便更好地反映它们所保存的数据。

推荐阅读