Select Multiple Id's in Javascript

Question

I am Totally new to programming , Please help me with below code.

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

I was creating Two Dropdowns with the same ID's , after that I want to retrieve the value for Second Select ID only..

Intentionally , I haven't written any function for first Select, I was just checking querySelectorAll method

In the First Iteration, I was selecting "1" in the dropdown , x[1] means numbers Select ID = 0 data[i][0] = 0

I was expecting the output as 23.. But , It was not working !!

Am I done anything wrong using querySelectorAll Method ?

After that , How can I pass those values into querySelectorAll — hackwithharsha
– hackwithharsha, Commented Mar 5, 2015 at 6:38

Arun P Johny · Accepted Answer · 2015-03-05 06:41:58Z

Since Id of an element must be unique, don't use duplicate ID's in your page.

For your problem, you can pass the changed element reference as a param to the method like

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

then

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

Demo: Fiddle

Md. Arafat Al Mahmud · Accepted Answer · 2015-03-05 06:38:30Z

1

Replace the id attribute with class.

class = "Ultra"

It will work.

answered Mar 5, 2015 at 6:38

Md. Arafat Al Mahmud

3,2146 gold badges37 silver badges69 bronze badges

2 Comments

hackwithharsha Over a year ago

I have tried class="Ultra" after that using the method getElementsByClassName("Ultra").

Md. Arafat Al Mahmud Over a year ago

In which browser you are testing ? getElementsByClassName will not work for IE < 9

tbnu · Accepted Answer · 2015-03-05 06:54:00Z

1

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

Changes to be made: 1)querySelectorAll('#ultra') 2)x[1].value

This works

answered Mar 5, 2015 at 6:54

tbnu

1266 bronze badges

Collectives™ on Stack Overflow

Select Multiple Id's in Javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related