2つのブートストラップドロップダウンボックスがあります。 1つは、ユーザーが選択した国に基づいてデータベースからすべての国名を表示します。もう1つのドロップダウンは、他のドロップダウンをクリックしたときに州を選択する必要があります。 1つのドロップダウンをクリックしたときに国名を表示するように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呼び出しで2番目のドロップダウンボックスをトリガーすることに打たれました。助けてください。
回答：
回答№1は0クラスにコンテンツを追加しています 。ドロップダウンメニュー クラスは多くの要素で同じにすることができるので、この使用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");
})
回答№2の場合は0
<!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>";
}
}
?>
回答№3の場合は0
あなたのポイントを得た。 htmlを変更する必要があるのは、返信応答のドロップダウンのみです。ここに例を示します。 http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/ 。私はすでにそれを使用していますが、私の要件に従ってそれを変更します。確認してコードをお楽しみください。