javascript - 多项选择的单一输出

Question

这已经让我发疯了一个多星期了，我什至还没有找到其他人试图做同样的事情。

本质上，我试图从多个 HTML 选择选项中获取单个输出，并且只显示最新的。

无法正常工作的 HTML 和 JS 示例:

function myFunction() {
  var x = document.getElementsByClassName("mySelect");
  var i = x.selectedIndex;
  document.getElementById("demo").innerHTML = x.options[i].text;
}

<form>
  <select class="mySelect" onchange="myFunction()">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
  </select>
  <select class="mySelect" onchange="myFunction()">
    <option>one</option>
    <option>two</option>
    <option>three</option>
  </select>
</form>

<p id="demo"></p>

现在，如果我对单个选择执行相同的操作并使用 ID 而不是类，它就可以正常工作。

单选示例:

function myFunction() {
  var x = document.getElementById("mySelect");
  var i = x.selectedIndex;
  document.getElementById("demo").innerHTML = x.options[i].text;
}

<form>
  <select id="mySelect" onchange="myFunction()">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
  </select>
</form>

<p id="demo"></p>

我完全被难住了，“未定义”错误完全没有告诉我任何事情。我就是想不通哪里出了问题。

我想要的只是有多个选择并且只输出最后选择的值。

Answer 1

var x = document.getElementsByClassName("mySelect"); 是一个数组，不适用于您的方法。做这样的事情。

function myFunction(select) {
  document.getElementById("demo").innerHTML = select.value;
  //or text 
  //document.getElementById("demo").innerHTML = select.options[select.selectedIndex].text
}

<form>
  <select class="mySelect" onchange="myFunction(this)">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
  </select>
  <select class="mySelect" onchange="myFunction(this)">
    <option>one</option>
    <option>two</option>
    <option>three</option>
  </select>
</form>

<p id="demo"></p>