Question

我有这个html代码：

<select id="s1">
  <option value="volvo" id="o1">Volvo</option>
  <option value="saab" id="o2">Saab</option>
  <option value="opel" id="o3">Opel</option>
  <option value="audi" id="o4">Audi</option>
</select>    

<select id="s2">
  <option value="Toyota" id="o5">Toyota</option>
  <option value="Porsche" id="o6">Porsche</option>
  <option value="Suzuki" id="o7">Suzuki</option>
  <option value="Mahindra" id="o8">Mahindra</option>
</select>

我想创建一个存储选定选项ID的数组。每个选定的选项都以一种方式存储在数组中，即删除该选项的先前ID并将其替换为新的ID。如果我更改了一个选项，则先前的ID应该被删除并替换为新的ID。由于有两个选择框，因此最后，数组应包含两个ID，即两个选项的ID。

谁能告诉我该怎么做？

Answer 1

您可以将change eventListener附加到选择框，并将两个框中的值存储在数组中。

var values = ["", ""];

document.getElementById("s1").addEventListener("change", changed);
document.getElementById("s2").addEventListener("change", changed);

function changed(e) {
  switch (e.target.id) {
    case "s1":
      values[0] = document.getElementById("s1").value;
      break;
    case "s2":
      values[1] = document.getElementById("s2").value;
      break;
  }
  console.log(values);
}

如果您想知道某个选项的ID而不是其值，可以使用此函数：

function changed(e) {
  var element;
  switch (e.target.id) {
    case "s1":
      element = document.getElementById("s1");
      values[0] = element[element.selectedIndex].id;
      break;
    case "s2":
      element = document.getElementById("s2");
      values[1] = element[element.selectedIndex].id;
      break;
  }
  console.log(values);
}

Answer 2

我不知道这是否是最好的解决方案哈哈。但是我只能考虑一下。

$(document).ready(function() {
  var v1 = {
    's1': 0,
    's2': 0
  }
  var teste = 0;

  $(".select").change(function(e){

    v1[$(this).attr('id')] = $(this).children("option:selected").attr('id');

    console.log(v1);

  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="s1" class="select">
  <option value="volvo" id="o1">Volvo</option>
  <option value="saab" id="o2">Saab</option>
  <option value="opel" id="o3">Opel</option>
  <option value="audi" id="o4">Audi</option>
</select>    

<select id="s2" class="select">
  <option value="Toyota" id="o5">Toyota</option>
  <option value="Porsche" id="o6">Porsche</option>
  <option value="Suzuki" id="o7">Suzuki</option>
  <option value="Mahindra" id="o8">Mahindra</option>
</select>

如何在javascript中的选择框数组中存储选项的ID？

2 个答案: