根据另一个选择显示一个选择的下拉值 [英] Show drop down values of a select based on another select
问题描述
我有一个项目"表，如下所示:
I have a table for 'Projects' as below
Project_ID | Client_ID
---------------------------
P1 C1
P2 C1
P3 C2
P4 C2
P5 C3
P6 C3
我有一个 select id ="1" ，其中显示了所有的客户端ID.
I have a select id="1" that shows all the Client ID's.
我正在显示另一个 select id ="2" ，以显示分配给客户ID的所有项目.
I'm showing an another select id="2" to show all the projects assigned to the client ID's.
基本上我想根据 select id ="1" 中的选定值显示 select id ="2" 的 option 值
Basically i want to show option values for select id="2" based on the selected value from select id="1".
示例，如果有人选择
<option value="C3">C3</option>
那么下面应该在那里
<select id="2">
<option value="P5">P5</option>
<option value="P6">P6</option>
</select>
我以为Ajax是答案，但我不知道这样做的正确方法.
Im thinking Ajax is the answer but i dont know a proper way to do it.
推荐答案
您可以为选择框的onChange事件添加事件侦听器. 在change事件上，获取选择框的值，并使用ajax请求将其值发送到服务器，并基于第一个选择框的值获取要在第二个选择框显示的值，并在第二个选择框显示该值. 根据国家/地区选择来选择州的示例代码:
You can add an event listener for the onChange event of the select box. On the change event get the value of the select box and send its value to the server using an ajax request and fetch the value you want to show in the second select box based on the first one's value and show it in the second select box. Example Code for state selection based on country selection:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(".country option:selected").val();
$.ajax({
type: "POST",
url: "process-request.php",
data: { country : selectedCountry }
}).done(function(data){
$("#response").html(data);
});
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<label>Country:</label>
<select class="country">
<option>Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
</select>
</td>
<td id="response">
<!--Response will be inserted here-->
</td>
</tr>
</table>
</form>
</body>
</html>
后端:
<?php
if(isset($_POST["country"])){
// Capture selected country
$country = $_POST["country"];
// Define country and city array
$countryArr = array(
"usa" => array("New Yourk", "Los Angeles", "California"),
"india" => array("Mumbai", "New Delhi", "Bangalore"),
"uk" => array("London", "Manchester", "Liverpool")
);
// Display city dropdown based on country name
if($country !== 'Select'){
echo "<label>City:</label>";
echo "<select>";
foreach($countryArr[$country] as $value){
echo "<option>". $value . "</option>";
}
echo "</select>";
}
}
?>
这篇关于根据另一个选择显示一个选择的下拉值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
