[英]Triggering the second dropdown box to display values based on the values selected from first dropdown by ajax
我有兩個bootstrap下拉框。 一個將基於用戶選擇的國家/地區顯示數據庫中的所有國家/地區名稱，另一個在我們單擊另一個下拉菜單時應選擇州。 我曾提出過ajax請求，要求在單擊一個下拉列表時顯示國家名稱。 如何根據國家/地區選擇觸發其他下拉菜單？
$(".dropdown").on("show.bs.dropdown", function(){
$.ajax({
type:'post',
url: 'Service.php',
dataType: 'json',//since you wait for json
data: {
'service': 'dropdown_country'
},
success: function(json){
//now when you received json, render options
$.each(json, function(i, option){
var rendered_option = '<li><a href="#">'+ option.country +'</a></li>';
$(rendered_option).appendTo('.dropdown-menu');
})
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
}
})
})
通過上述操作，單擊兩個下拉列表時都顯示國家名稱。 我只需要第一個下拉列表來顯示國家名稱，而其他下拉列表在單擊以顯示基於國家下拉列表中選擇的國家的州名時應調用其他服務。 我在觸發ajax調用中的第二個下拉框時感到震驚。 請幫忙。
<!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文件的請求
<?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>";
}
}
?>
您要將內容附加到類.dropdown-menu類對於許多元素可以是相同的，因此要解決此具有不同名稱的使用ID，然后附加內容
例：
var rendered_option = '<li><a href="#">'+ option.country +'</a></li>';
$(rendered_option).appendTo('#dropdown-menu1');
})
var rendered_option = '<li><a href="#">'+ option.states +'</a></li>';
$(rendered_option).appendTo('#dropdown-menu2');
})
明白了。 您只需要更改html您的返回響應下拉列表即可。這是例如http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/ 。 我已經使用過，也可以根據自己的要求進行更改。 檢查它並享受代碼。
如何根據第一個下拉菜單中選擇的值在第二個下拉菜單中選擇一個值？ 這兩個值都來自數據庫
[英]How to select a value in second dropdown based on value selected in first dropdown? both values are coming from the database
使用javascript使用與第一個下拉框相同的值填充第二個下拉框？
[英]Populate second dropdown box with same values as the first using javascript?
如果在第一個下拉列表中選擇了一個值（使用變量），則顯示第二個下拉列表？
[英]Display second dropdown list if a value is selected in the first dropdown (using variables)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.