Question

这让我疯了一个多星期了，我甚至还没找其他人试图做同样的事情。

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

示例HTML＆amp; 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而不是Class，它就可以正常工作。

单一选择工作示例：

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

getElementsByClassName()方法返回文档中具有指定类名的所有元素的集合，作为NodeList对象。

NodeList对象表示节点的集合。可以通过索引号访问节点。索引从0开始

。您需要getElementsByClassName之后的索引getElementsByClassName("className:)[0]。

如果有元素，则返回一个简单的方法来记住它，如果它的元素单个对象将被返回，则返回数组。

根据您需要，可以通过在函数中使用this关键字传递对象的引用来完成

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

多个选择的单个输出

2 个答案: