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

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 字段（正如$.each 中的jquery 代码所预期的那样）并返回一个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 方法。

Answer 2

有两种方法：

• 首先，您可以加载所有选项 第二个选择列表进入 JavaScript 数组。当一个选项是 在第一次选择中选择， 用第二个填充 适当的选项。
• 其次，可以使用Ajax制作一个 调用服务器并获取 基于第二个选择的选项 关于第一个的选择。这 然后服务器将返回一个列表 选项（每行一个，制表符分隔 我是怎么做的）你解析和 用于填充第二个选择。

第一个选项非常快速和简单，但如果第二个选项的选项列表很大，则可能需要一段时间才能加载。

第二个选项更复杂，但更灵活。

这里有一些 Ajax 代码可以帮助您入门：

创建请求：

var HTTP_UNINITIALIZED  = 0;
var HTTP_SETUP_NOTSENT  = 1;
var HTTP_PROCESSING     = 2;
var HTTP_PARTIAL_RESULT = 3;
var HTTP_COMPLETE       = 4;

function createRequest()
{
  var request = null;

  try
  {
    request = new XMLHttpRequest();
  }
  catch( failed_once )
  {
    try
    {
      request = new ActiveXObject( "Msxml2.XMLHTTP" );
    }
    catch( failed_twice )
    {
      try
      {
        request = new ActiveXObject( "Microsoft.XMLHTTP" );
      }
      catch( failed_thrice )
      {
        request = null;
      }
    }
  }

  return( request );
}

发送请求：

var request = createRequest();
function doSearch( value )
{
  getURL = "<url to get list>?Value=" + value;

  request.open( "POST", getURL, true );
  request.onreadystatechange = showResults;
  request.send( null );
}

使用结果：

function showResults()
{
  if( request.readyState == HTTP_COMPLETE && request.status == 200 )
  {
    if( request.responseText != "" )
    {
      var lines = request.responseText.split( "\n" );
      for( i = 0 ; i < lines.length ; i++ )
      {
        var parts = lines[i].split( "\t" );
        // populate the second select
      }
    }
  }
}

如何处理服务器端部分取决于您。