从几个下拉列表中获取值

时间:2018-03-24 04:57:19

标签: javascript onchange dropdown

我想从几个下拉列表中获取一个值,这几个下拉列表中有相同的名称 一个数据库表。
用户只能看到他们之前选择的一个下拉列表,但是我无法检测到用户选择了哪个下拉列表。所以我做了一些事情:

        $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从所有下拉列表中获取所有值,并设置默认值=&#39; 0&#39;到所有下拉列表,在ajax中使用if else语句检查哪个下拉列表不等于0以确认我的值是什么以及下拉列表是什么。
但这种方式与我的另一个函数冲突,所以我找到了另一种方法做到了

1 个答案:

答案 0 :(得分:1)

试试这个。使用querySelectorAll

&#13;
&#13;
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
    });
}
&#13;
<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>
&#13;
&#13;
&#13;