javascript - js如何获取多选列表数据？

Question

<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
}

请提出您的宝贵建议

Answer 1

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

[name^="user["]

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

如果您想从 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>

不过，您应该为输入字段指定更能反射(reflect)其所保存数据的名称。