Getting value from multiple dropdowns (select option)

Question

I have several dropdown that I want to send their value to a external .php. The problem is how can I reference the value from the drop down and ID which dropdown was used. Hope I have explained it well enough.

<html>
    <head>

        <script>
         function sayHelloWorld()
         {
           var x = document.getElementById("myDropDown").selectedIndex;
           window.location.href = "externalPHPfile.php?w1=" + x + "&w2=" + stuff;
         }
        </script>

    </head>
    <body>

    <?php

    for($x=0;$x<4;$x++)
    {
                      echo("
                       <section>
                       <select  id='myDropDown' onchange='sayHelloWorld()'>
                       <option value='' disabled selected>CHOOSE&nbsp;ONE</option>
                       <option id='' value='cows'>COWS</option>
                       <option id='' value='pigs'>PIGS</option>
                       <option id='' value='chicks'>CHICKS</option>
                       </select>
                       </section>
                         ");
    }

  ?>
</body>
</html>

ids are singular.

epascarello
– epascarello

2017-02-08 13:24:50 +00:00
Commented Feb 8, 2017 at 13:24 — epascarello
– epascarello, Commented Feb 8, 2017 at 13:24

epascarello · Accepted Answer · 2017-02-08 14:09:10Z

1

Ids are singular so you can not select an individual one by what you picked. There are many ways of doing it, one way is to pass the event and read the target.

function sayHelloWorld(event) {
  var sel = event.target,  //the select that was active
      selIndex = sel.selectedIndex,  
      value = sel.options[selIndex].value;
  console.log(selIndex, value);
}

<section>
  <select id='myDropDown1' onchange='sayHelloWorld(event)'>
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option>
    <option id='' value='cows'>COWS</option>
    <option id='' value='pigs'>PIGS</option>
    <option id='' value='chicks'>CHICKS</option>
  </select>
</section>
<section>
  <select id='myDropDown2' onchange='sayHelloWorld(event)'>
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option>
    <option id='' value='cows'>COWS</option>
    <option id='' value='pigs'>PIGS</option>
    <option id='' value='chicks'>CHICKS</option>
  </select>
</section>

You can pass the current object with this

function sayHelloWorld(sel) {
  var selIndex = sel.selectedIndex,  
      value = sel.options[selIndex].value;
  console.log(selIndex, value);
}

<section>
  <select id='myDropDown1' onchange='sayHelloWorld(this)'>
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option>
    <option id='' value='cows'>COWS</option>
    <option id='' value='pigs'>PIGS</option>
    <option id='' value='chicks'>CHICKS</option>
  </select>
</section>
<section>
  <select id='myDropDown2' onchange='sayHelloWorld(this)'>
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option>
    <option id='' value='cows'>COWS</option>
    <option id='' value='pigs'>PIGS</option>
    <option id='' value='chicks'>CHICKS</option>
  </select>
</section>

Or you can add events without the inline event handler

function sayHelloWorld() {
  var sel = this,
      selIndex = sel.selectedIndex,  
      value = sel.options[selIndex].value;
  console.log(selIndex, value);
}

var sels = document.querySelectorAll('.selNav');
for (var i=0; i<sels.length;i++) {
   sels[i].addEventListener("change", sayHelloWorld);
}

<section>
  <select class="selNav" id='myDropDown1'>
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option>
    <option id='' value='cows'>COWS</option>
    <option id='' value='pigs'>PIGS</option>
    <option id='' value='chicks'>CHICKS</option>
  </select>
</section>
<section>
  <select class="selNav" id='myDropDown2' >
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option>
    <option id='' value='cows'>COWS</option>
    <option id='' value='pigs'>PIGS</option>
    <option id='' value='chicks'>CHICKS</option>
  </select>
</section>

So than you would change the console.log lines to be

window.location.href = "externalPHPfile.php?w1=" + selIndex + "&w2=" + stuff;

or

window.location.href = "externalPHPfile.php?w1=" + encodeURIComponent(value) + "&w2=" + stuff;

That is assuming that stuff is valid in your code that you are not showing.

edited Feb 8, 2017 at 14:09

answered Feb 8, 2017 at 13:29

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Mark James Over a year ago

This is great thanks. Could you explain what the console.log(selIndex, value); is for.

epascarello Over a year ago

You do not know what console.log is? developer.mozilla.org/en-US/docs/Web/API/Console

Mark James Over a year ago

Seem that I cant send to external page after window.location.href = "externalPHPfile.php?w1=" + x + "&w2=" + stuff; function sayHelloWorld() { var sel = this, selIndex = sel.selectedIndex, value = sel.options[selIndex].value; console.log(selIndex, value); }

epascarello Over a year ago

What is the error in the console, what is not working? the variable w is either going to be selIndex (if you want the index) or value (if you want the value). I also have no clue what stuff is...

Mark James Over a year ago

Its just not going to another page - when using alert() - it shows the value is being passed, but just stops there.

|

Shubhranshu · Accepted Answer · 2017-02-08 13:26:50Z

0

<html>
<head>

    <script>
     function sayHelloWorld(elem)
     {
       var x = elem.selectedIndex;
       window.location.href = "externalPHPfile.php?w1=" + x + "&w2=" + stuff;
     }
    </script>

</head>
<body>

<?php

for($x=0;$x<4;$x++)
{
                  echo("
                   <section>
                   <select  id='myDropDown' onchange='sayHelloWorld(this)'>
                   <option value='' disabled selected>CHOOSE&nbsp;ONE</option>
                   <option id='' value='cows'>COWS</option>
                   <option id='' value='pigs'>PIGS</option>
                   <option id='' value='chicks'>CHICKS</option>
                   </select>
                   </section>
                     ");
}

?>
</body>
</html>

answered Feb 8, 2017 at 13:26

Shubhranshu

5213 silver badges12 bronze badges

1 Comment

Mark James Over a year ago

Does not seem to go to external page.

Collectives™ on Stack Overflow

Getting value from multiple dropdowns (select option)

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related