javascript - 从几个下拉列表中获取值(value)

我想从几个下拉列表中获取一个值，这几个下拉列表中的名称相同
一张数据库表。用户只能基于他们先前的选择看到一个下拉列表，但我无法检测到用户选择了哪个下拉列表，因此我做了下面的事情：

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

我当前的解决方案是使用ajax从所有下拉列表中获取所有值，并将默认值='0'设置为所有下拉列表，在ajax中，使用if else语句检查哪个下拉列表不等于0来确认我的是什么值和哪个下拉列表。但是这种方式与我的另一个函数冲突，所以我找到了另一种方法

最佳答案

尝试这个。使用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>