如何从不同的输入获取所有选定的值-Javascript

Question

我看到了很多类似的问题，但我的问题与他们不同。 我有一个表单，该表单包含3个用于不同变量的不同选择区域。 我想得到它们，但我不知道该怎么做，而且我是Java和HTML的新手。

编辑：我删除了“发送数据库”部分。 这是上下文的一部分。

这是HTML：

    <form>

  <p> Scores: </p>

    <select name ="scores:">
      <option value= " 9 " name= " 9 "> 9 </option>
      <option value= " 8 " name= " 8 "> 8 </option>
      <option value= " 7 " name= " 7 "> 7 </option>
      <option value= " 6 " name= " 6 "> 6 </option>
      <option value= " 5 " name= " 5 "> 5 </option>
      <option value= " 4 " name= " 4 "> 4 </option>
      <option value= " 3 " name= " 3 "> 3 </option>
      <option value= " 2 " name= " 2 "> 2 </option>
      <option value= " 1 " name= " 1 "> 1 </option>

    </select>

<p> Years: </p>


  <select id ="year">
  </select>

  <p> Languages: </p>

  <select name="language">
    <option value ="Aborginial", name = "Aborginial"> Aborginial </option>
    <option value="Arabic"> Arabic </option>
    <option value="Aramaic">Aramaic</option>
    <option value="Bosnian">Bosnian</option>
    <option value="Cantonese">Cantonese</option>
    <option value="Chinese">Chinese</option>
    <option value="Czech">Czech</option>
      </select>

  <button type="button">Submit data</button>
  </form>

假设用户选择分数7，将语言设置为波斯尼亚语，年份为1980（我在函数中填充年份框，不用担心它不是空列表），我想获取这些选择的值（得分：7） lang：Bosnian，year：1980）顺便说一句，它们都是形式。 那么如何获得这些选定的值？

Answer 1

您的HTML中存在以下错误：

1. 表单元素名称属性中不允许使用特殊符号。
2. 您不能在HTML属性后面加上逗号。
3. 如果您的值等于选项名称，则无需放置额外的<option>标记属性。

所以在这段代码中：

<select name="scores">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>

您可以按以下方式访问“得分”值：

var select_scores = document.getElementById("form").scores;
select_scores.options[select_scores.selectedIndex].value;

其他形式的<select>元素相同。

Answer 2

返回一个对象：

 document.getElementById("submit").addEventListener("click", getData); function getData() { var score = document.getElementById('scores').value; var year = document.getElementById('year').value; var language = document.getElementById('language').value; var data = {'score':score, 'year':year, 'lang':language}; console.log(data); } 

  <form> <p> Scores: </p> <select id ="scores" name ="scores:"> <option value= " 9 " name= " 9 "> 9 </option> <option value= " 8 " name= " 8 "> 8 </option> <option value= " 7 " name= " 7 "> 7 </option> <option value= " 6 " name= " 6 "> 6 </option> <option value= " 5 " name= " 5 "> 5 </option> <option value= " 4 " name= " 4 "> 4 </option> <option value= " 3 " name= " 3 "> 3 </option> <option value= " 2 " name= " 2 "> 2 </option> <option value= " 1 " name= " 1 "> 1 </option> </select> <p> Years: </p> <select id ="year"> </select> <p> Languages: </p> <select id= "language" name="language"> <option value ="Aborginial", name = "Aborginial"> Aborginial </option> <option value="Arabic"> Arabic </option> <option value="Aramaic">Aramaic</option> <option value="Bosnian">Bosnian</option> <option value="Cantonese">Cantonese</option> <option value="Chinese">Chinese</option> <option value="Czech">Czech</option> </select> <button id="submit" type="button">Submit data</button> </form>