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

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

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

2 个答案: