Question

我完全是编程新手，请帮我下面的代码。

<body>
<p>
<select id="Ultra" onchange="">
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="C">C</option>
 </select>
</p>
<p>
<select id="Ultra"  onchange="showData()">
          <option value="0">1</option>
          <option value="1">2</option>
          <option value="2.0">3</option>
          <option value="3.0">4</option>
      </select>
</p>
<p id="data">
 <script>


  function showData()
{
  var data =[[0,23,A],[1,33,B],[2,44,c],[3,55,D]];
  var html = "";
  var x = new Array();
   x = document.querySelectorAll("Ultra")
  for (var i=0; i<data.length; i++) 
  {
    if(data[i][0]== x[1])
    {
    html = data[i][1] ;
   }
   }
  document.getElementById("data").innerHTML = html;
}
 </script>
 </p>
 </body>

我正在创建具有相同ID的两个下拉菜单，之后我想要仅检索第二选择ID的值。

故意，我没有为第一个Select编写任何函数，我只是检查querySelectorAll方法

在First Iteration中，我在下拉列表中选择“1”， x [1]表示数字选择ID = 0 data [i] [0] = 0

我期待输出为23 .. 但是，它没有用!!

使用querySelectorAll方法我做错了吗？

Answer 1

由于元素的ID必须是唯一的，因此请勿在页面中使用重复的ID。

对于您的问题，您可以将更改后的元素引用作为参数传递给

之类的方法

<p>
    <select class="Ultra" onchange="">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
</p>
<p>
    <select class="Ultra" onchange="showData(this)">
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2.0">3</option>
        <option value="3.0">4</option>
    </select>
</p>
<p id="data"></p>

然后

function showData(el) {
    var data = [
        [0, 23, 'A'], //the string literals like `A` must be enclosed in '' or ""
        [1, 33, 'B'],
        [2, 44, 'c'],
        [3, 55, 'D']
    ];
    var html = "";
    for (var i = 0; i < data.length; i++) {
        if (data[i][0] == el.value) { //need to test against the value of the select
            html = data[i][1];

        }
    }
    document.getElementById("data").innerHTML = html;
}

演示：Fiddle

Answer 2

＆＃13;

function showData()
{
   
  var data =[[0,23,'A'],[1,33,'B'],[2,44,'c'],[3,55,'D']];
  var html = "";
  var x = new Array();
   x = document.querySelectorAll("#Ultra")
  for (var i=0; i<data.length; i++) 
  {
    if(data[i][0]== x[1].value)
    {
    html = data[i][1] ;
   }
   }
  document.getElementById("data").innerHTML = html;
}

＆＃13;

要做的更改： 1）querySelectorAll（＆＃39;＃超＆＃39;） 2）×[1]。价值

这有效

Answer 3

将id属性替换为class。

class = "Ultra"

它会起作用。

在Javascript中选择多个ID

3 个答案: