根据另一个选择显示一个选择的下拉值
[英]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
I have a select id="1" that shows all the Client ID's. 我有一个选择ID =“ 1” ，其中显示了所有的客户端ID。
I'm showing an another select id="2" to show all the projects assigned to the client ID's. 我正在显示另一个select id =“ 2”，以显示分配给客户端ID的所有项目。
Basically i want to show option values for select id="2" based on the selected value from select id="1" . 基本上我想显示选项值选择ID =“2”基于从选择ID =“1”选择的值。
Example if some one selects 如果有人选择的示例
<option value="C3">C3</option>
Then below should be there 然后下面应该在那里
<select id="2">
<option value="P5">P5</option>
<option value="P6">P6</option>
</select>
Im thinking Ajax is the answer but i dont know a proper way to do it. 我以为Ajax是答案，但我不知道这样做的正确方法。
3 个解决方案
解决方案1
3 已采纳 2017-03-01 05:52:53
You can add an event listener for the onChange event of the select box. 您可以为选择框的onChange事件添加事件侦听器。 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. 在change事件上，获取选择框的值，并使用ajax请求将其值发送到服务器，并基于第一个选择框的值获取要在第二个选择框显示的值，并在第二个选择框显示该值。 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>
Backend: 后端：
<?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>";
}
}
?>
解决方案2
0 2017-03-01 06:56:11
You can fire up an event on the first select being changed and make an ajax call with the id of item of first select. 您可以在更改的第一个选择上触发事件，并使用第一个选择的项目ID进行ajax调用。 Then get contents through ajax and dynamically create options with the data you get and fill the second select box. 然后通过ajax获取内容，并使用获取的数据动态创建选项，并填写第二个选择框。
$(document).on('change','select#1',function(){
var id = $(this).val();
$.ajax({
method: 'POST',
url: 'your-url',
data: {'id' : id},
success: function(data){
//generate options dynamically
$('select#2').html('');
$('select#2').html('the options you generated');
}
});
}); }）;
解决方案3
-1 2017-03-01 05:50:18
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.