可靠的下拉菜单

时间:2017-02-16 07:19:43

标签: javascript php jquery ajax

使用jquery,ajax和php创建三个可靠的下拉菜单后。 在我的下拉菜单已经填充后,例如当我在第一个下拉菜单中选择一个值时,第二个下拉菜单是根据第一个选择的值创建的,依此类推,当我选择一个值时,使用第三个下拉菜单在第二个下拉菜单中。现在,如何再次捕获所选值以执行对数据库的进一步查询。

1 个答案:

答案 0 :(得分:1)

为所有选择框设置相同的类名,并且选择框中的每个更改都会运行该函数并运行所有选中的每个函数以获取所有选定的值,如此



               
       dropdown1 ='';
        dropdown2 ='';
         dropdown3 ='';

      $('.qm_SELECT_sel').change(function(){
   
      // $all_drop_down_values =[];


  $('.qm_SELECT_sel option:selected').each(function(){ 
    
    if($(this).val()!='' &&  $(this).attr('name')=='dropdown1')
      {
         dropdown1 =$(this).val();
 
      }
      if($(this).val()!='' &&  $(this).attr('name')=='dropdown2')
      {
         dropdown2 =$(this).val();
 
      }
       if($(this).val()!='' &&  $(this).attr('name')=='dropdown3')
      {
         dropdown3 =$(this).val();
 
      }
   }); 
    
     if(dropdown1!='' && dropdown3 !='' && dropdown3 !='')
      {
           $.ajax({ 
              url: 'your_destination_page.php',
             type:'POST',
             data:{dropdown1:dropdown1,dropdown2:dropdown2,dropdown3:dropdown3},
            success:function(data)
            {
                 alert("hi");
             }
            
            
           });
      }
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="dropdown1"  class="qm_SELECT_sel">
      <option value=""  >select 1 </option>
       <option value="1" >1 </option>
       <option value="2" >2</option>
      </select>

    <select name="dropdown2" class="qm_SELECT_sel" >
      <option value="" >select 2 </option>
       <option value="1" >1 </option>
       <option value="2" >2</option>
      </select>

     <select name="dropdown3" class="qm_SELECT_sel" >
      <option value="" >select 2 </option>
       <option value="1" >1 </option>
       <option value="2" >2</option>
      </select>
&#13;
&#13;
&#13;