根据另一个下拉列表填充下拉列表的最佳和最简单的方法是什么

Question

很简单,我有一个动态填充数据的下拉菜单:

SQL代码

$querycourse = "SELECT course, COUNT(course) AS count FROM acme WHERE course IS NOT NULL GROUP BY course ";
$procc = mysqli_prepare($link, $querycourse);
$queryc =  mysqli_query($link, $querycourse) or die(mysqli_error($link));

PHP代码

echo "<select name='course[]' value='' multiple='multiple' size=10>";
            // printing the list box select command
            echo "<option value=''>All</option>";
            while($ntc=mysqli_fetch_array($queryc)){//Array or records stored in $nt
            echo "<option value=\"$ntc[course]\">\"$ntc[course]\"</option>";
            /* Option values are added by looping through the array */
            }
            echo "</select>";// Closing of list box 

我需要的是另一个下拉列表,其中包含基于第一个下拉框中的选择的数据.

我正在使用MySQL,PHP,Javascript,也可以(推动)使用jQuery.我没有Ajax的经验.

有人会善意地指出我正确的方向吗？!

提前谢谢,一如既往

荷马.

Answer 1

第一种和最佳方法(如果您有或可能有足够的选项特定数据)
使用AJAX.我认为,与实现相同的其他方式相比,这是最简单的方法.使用Jquery实现AJAX.它让AJAX变得轻而易举!在这里,我为您分享一块蛋糕 -

以下是您需要的完整代码 -

• 在你的第一个选择上调用一个javascript函数populateSecondDropdown(),如下所示 -

      echo "<select  name='course[]' value='' multiple='multiple' size=10 onchange='populateSecondDropdown(this, 'http://yourprojectUrl','Any Subject');'>";
              // printing the list box select command
              echo "<option value=''>All</option>";
              while($ntc=mysqli_fetch_array($queryc))
              {//Array or records stored in $nt
                  echo "<option value=\"$ntc[course]\">\"$ntc[course]\"</option>";
                  /* Option values are added by looping through the array */
              }
              echo "</select>";// Closing of list box 
  

• 在populateSecondDropdown()函数内部定义一个ajax调用 -

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  
  <script  type="text/javascript">  
      function populateSecondDropdown(object,baseUrl)
      {
          $.ajax({
          type: "POST", 
          url: baseUrl+"/ajax/fetchOptions.php", 
          data: { id_option: $(object).val(), operation: 'get_subjects' },
          dataType: "json",
          success: function(data) 
          {
              //Clear options corresponding to earlier option of first dropdown
             $('select#secondDropdown').empty(); 
             $('select#secondDropdown').append('<option value="0">Select Option</option>');
                     //Populate options of the second dropdown
             $.each( data.subjects, function() 
             {    
                 $('select#secondDropdown').append('<option value="'+$(this).attr('option_id')+'">'+$(this).attr('option_name')+'</option>');
             });
             $('select#secondDropdown').focus();
          },
              beforeSend: function() 
              {
                  $('select#secondDropdown').empty();
                  $('select#secondDropdown').append('<option value="0">Loading...</option>');
              },
              error: function() 
             {
                $('select#secondDropdown').attr('disabled', true);
                $('select#secondDropdown').empty();
                 $('select#secondDropdown').append('<option value="0">No Options</option>');
            }
          });
       }
  </script>
  

  • 最后是在AJAX处理器文件fetchOptions.php中获取第二个下拉选项的查询.您可以在此处使用$ _POST ['id_option']来获取其下的选项.这里的数据库查询应该为每个选项获取option_id和option_name字段(正如内部的jquery代码所期望的那样$.each)并返回一个json编码的数组,如下所示:

    return json_encode(array("subjects" => $resultOfQuery));
    

第二种方法(仅使用javascript)

• 获取按第一个下拉列表字段分组的第二个下拉列表的所有数据.例如,让我们在第一个下拉菜单中显示课程,在第二个下方显示课程

  • 创建第二个下拉列表的所有选项.在创建如下选项时分配等于课程的类: -

    $querycourse = "SELECT course, subject FROM subjects WHERE subject IS NOT NULL GROUP BY course ";
    $procc = mysqli_prepare($link, $querycourse);
    $queryc =  mysqli_query($link, $querycourse) or die(mysqli_error($link));
    
    echo "<select  name='subjects[]' value='' multiple='multiple' size=100>";
    echo "<option value=''>All</option>";
                while($ntc=mysqli_fetch_array($queryc))
                {//Array or records stored in $nt
                    echo "<option value=\"$ntc[subject]\" class=\"$ntc[course]\">\"$ntc[subject]\"</option>";
                }
                echo "</select>";
    

  • 然后定义onchange="displaySubjectsUnderThisCourse(this);"第一个下拉列表并写下这个javascript: -

     function displaySubjectsUnderThisCourse(object)
     {
         var selectedCourse = $(object).val();
        //Display the options with class = the selected option from first dropdown
        $("."+selectedCourse).removeClass("hidden"); //define a class hidden with display:none;
    
       $('option:not(.selectedCourse)').hide();  // hide all options whose class is other than selectedCourse - Not sure whether this will work or not, though
    
      //Deselect any previous selections
      //If single option selection is allowed
      $('select#secondDropdown option').attr('selected', false); 
      // or following if multiple selection is allowed (needed for IE)
      $('select#secondDropdown option').attr('selectedIndex', -1); 
    
    
    }
    

    这里的基本思想是隐藏/显示选项组,但我的代码可能有错误.

最后请注意,第二种方法(获取所有选项值)只有在数据量有限的情况下才会更好,并且非常确定将来总会有更少的数据.但是,由于没有人能够对未来如此肯定,因此建议始终使用AJAX方法.