jquery 填充 下拉框_使用下拉框填充第二个下拉框

jquery 填充 下拉框

I found this question asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX.

我在许多不同的论坛中都发现了这个问题，询问如何执行此操作，因此在这里我将描述如何使用PHP和AJAX实现解决方案。

The logical flow for the problem should be:

该问题的逻辑流程应为：

1. Write an event handler for the first drop down box to get the user's selections.
   为第一个下拉框编写事件处理程序，以获取用户的选择。
2. Send the user input to the server
   将用户输入发送到服务器
3. At the server, retrieve the data from the client side and process it; then send the result to the client side.
   在服务器上，从客户端检索数据并进行处理； 然后将结果发送到客户端。
4. At the client, use Javascript to parse the server response and update the other drop down box.
   在客户端，使用Javascript解析服务器响应并更新另一个下拉框。

()

Write an event handler for the first drop down box to get the user's selections:

为第一个下拉框编写事件处理程序，以获取用户的选择：

It sounds difficult. What is an "event handler"?  In fact, every user action performed on the web page triggers an event. To handle those events, we need to write a Javascript function, and we call these javascript functions "event handlers". To handle the user's selection of an item in the drop-down box, we need to capture the onchange event. Here is a sample code:

听起来很难。 什么是“事件处理程序”？ 实际上，在网页上执行的每个用户操作都会触发一个事件。 要处理这些事件，我们需要编写一个Javascript函数，并将这些javascript函数称为“事件处理程序”。 要处理用户在下拉框中选择的项目，我们需要捕获onchange事件。 这是一个示例代码：

 <select id=type name="type" onchange="updateData(this)"> 

The above code means that a function named "updateData" would be triggered when a user selects an item from this drop-down box. Here the variable "this" means the dropdown box itself. Let's see what happens in the "updateData" function:

上面的代码意味着当用户从该下拉框中选择一个项目时，将触发名为“ updateData”的函数。 此处的变量“ this”表示下拉框本身。 让我们看看“ updateData”函数中发生了什么：

function updateData(dropDownBox)
{
  var value=dropDownBox.options[dropDownBox.selectedIndex].value;
  if (value!="") //Ensure no empty value is submitted to server side
  {
    jQuery.post("getResult.php","type="+value,updateNumber);
  }
} 

将用户输入发送到服务器 (Send the user input to the server)

The statement:

该声明：

var value=dropDownBox.options[dropDownBox.selectedIndex].value; 

retrieves user input from the first drop down box. The following statement means user input is sent to server side PHP script "getResult.php".

从第一个下拉框中检索用户输入。 以下语句表示将用户输入发送到服务器端PHP脚本“ getResult.php”。

jQuery.post("getResult.php","type="+value,updateNumber); 

where we use the Jquery lib to simplify the sending data to the server process. The second parameter is the format of a normal query string and the third parameter is a function that processes the server response.

我们使用Jquery lib简化了向服务器进程发送数据的过程。 第二个参数是普通查询字符串的格式，第三个参数是处理服务器响应的函数。

在服务器上，从客户端检索数据并进行处理； 然后将结果发送到客户端： (At the server, retrieve the data from the client side and process it; then send the result to the client side:)

The server-side program in our case is "getResult.php". For demonstration purposes we do not connect to a database; we just use the user input to generate a different result and then send that to the client.

在我们的例子中，服务器端程序是“ getResult.php”。 出于演示目的，我们不连接数据库。 我们只是使用用户输入来生成不同的结果，然后将其发送给客户端。

<?php
	$type=htmlspecialchars($_POST["type"]);
	if ($type=="1")
	{
		echo "1-one\n";//Ends-with \n for client side getting data from server side response
		echo "3-three\n";//Ends-with \n for client side getting data from server side response
		echo "5-five\n";//Ends-with \n for client side getting data from server side response
		echo "7-seven\n";//Ends-with \n for client side getting data from server side response
	}
	else
	{
		if ($type=="0")
		{	echo "2-two\n";//Ends-with \n for client side getting data from server side response
			echo "4-four\n";//Ends-with \n for client side getting data from server side response
			echo "6-six\n";//Ends-with \n for client side getting data from server side response
			echo "8-eight\n";//Ends-with \n for client side getting data from server side response
		}
	}		
?> 

在客户端，使用Javascript解析服务器响应并更新另一个下拉框。 (At the client, use Javascript to parse the server response and update the other drop down box.)

As described above, we need to specify a function that processes the server response and updates the other drop down box.

如上所述，我们需要指定一个函数来处理服务器响应并更新另一个下拉框。

jQuery.post("getResult.php","type="+value,updateNumber); 

So, we need to write a Javascript function named "updateNumber" to get the job done.

因此，我们需要编写一个名为“ updateNumber”的Javascript函数来完成这项工作。

function updateNumber(data)
      {
        var numberData=jQuery.trim(data).split("\n");//split server side response by "\n"
        var number=document.getElementById("number");
        $("#number").empty();                       //empty the 2nd drop down box  
        for (i=0;i<numberData.length;i++)
        {
          value=numberData[i].split("-")[0];//get value from server response 
          text=numberData[i].split("-")[1]; //get text from server response 
          option=new Option(text,value);    //for better IE compatibility
          number.options[i]=option;      
        }
      } 

The first two lines of the function parse server response and the third line empty the target drop down box; the for loop is adding options to the target drop-down box.

该函数的前两行解析服务器响应，第三行清空目标下拉框； for循环将选项添加到目标下拉框中。

I have attached the sample code for your reference.

我已随附示例代码供您参考。

php-ajax.zip

php-ajax.zip

翻译自: https://www.experts-exchange.com/articles/18556/Using-a-drop-down-box-to-populate-a-second-drop-down-box.html

jquery 填充 下拉框