Get a value from few drop down

Question

I want to get a value from few dropdown, this few dropdown have a same name in a table of database.
And user can see only one dropdown base on their previous selection, but I can't detect which dropdown is selected by users.So I make something bellow:

        $dropvalue = "GetFromJavaascriptBellow" //use to get value from javascript bellow

    <select id="dropdown1" name="dropdown1">
    <option selected disabled>-- Please select a option --</option>
    <option value="abc">abc</option>
    <option value="def">def</option>
    <option value="ghi">ghi</option>
    </select>

    <select id="dropdown2" name="dropdown2">
    <option selected disabled>-- Please select a option --</option>
    <option value="123">123</option>
    <option value="456">456</option>
    <option value="789">789</option>
    </select>

    <select id="dropdown3" name="dropdown3">
    <option selected disabled>-- Please select a option --</option>
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    <option value="ccc">ccc</option>
    </select>

    <script>
        $('#dropdown1').change(function () {
             if ( this.value != '' || this.value != NULL)
          {
            $dropvalue = this.value //This line is what I can't do (is it possible php variable get value from javascript?)
          }
          else
          {

          }
        });

        $('#dropdown2').change(function () {
             if ( this.value != '' || this.value != NULL)
          {
            $dropvalue = this.value //This line is what I can't do (is it possible php variable get value from javascript?)
          }
          else
          {

          }
        });

        $('#dropdown3').change(function () {
             if ( this.value != '' || this.value != NULL)
          {
            $dropvalue = this.value //This line is what I can't do (is it possible php variable get value from javascript?)
          }
          else
          {

          }
        });
    </script>

My current solution is using ajax to get all of the value from all drop down, and set the default value ='0' to all dropdown, in ajax using if else statement to check which dropdown is not equal to 0 to confirm what is my value and which dropdown is.
But this way is conflict with my another function, so I finding another way to did it

Answer 1

Try this. Use querySelectorAll

 x=document.querySelectorAll("select.abc"); for(i=0;i<x.length;i++){ x[i].addEventListener("change",function(){ console.log(this.value); // your ajax call or whatever function you want excute }); } 

 <select id="dropdown1" name="dropdown1" class="abc"> <option selected disabled>-- Please select a option --</option> <option value="abc">abc</option> <option value="def">def</option> <option value="ghi">ghi</option> </select> <select id="dropdown2" name="dropdown2" class="abc"> <option selected disabled>-- Please select a option --</option> <option value="123">123</option> <option value="456">456</option> <option value="789">789</option> </select> <select id="dropdown3" name="dropdown3"> <option selected disabled>-- Please select a option --</option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc">ccc</option> </select>