[英]Jquery drop down option on based previous selction
是否可以根據先前的下拉選擇從數據庫中獲取數據?
例如:
<select id="paramscountries" class="chzn-done" style="display: none;" name="params[countries][]" multiple="true" size="10">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">USA</option>
</select>
如果我從上面的列表中選擇USA,它將進行查詢並從數據庫中獲取所有州的名稱。 例如,來自states.php&,它將在另一個下拉選擇中顯示所有狀態名稱,而無需重新加載該頁面。
您將需要為此使用Javascript或jQuery,然后將其用於發布到返回結果的頁面。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="paramscountries" class="chzn-done" style="display: block;" onchange="getNewList($(this).val());" name="params[countries][]" multiple="true" size="10">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">USA</option>
</select>
<select name="states" id="states">
</select>
<script type="text/javascript">
function getNewList(country) {
$.post('post.api.php', {'api': 'getStates', 'countries': country}, function(response) {
var obj = $.pareseJSON(response);
$('#states').html(obj.states);
});
}
post.api.php頁面
<?php
if(isset($_POST['api'])){
if($_POST['api'] == 'getStates'){
// sdet the countries array to a variable
$countries = $_POST['countries'];
// set a variable to hold the results
$results = array();
// query your db
$stm = $db->prepare('SELECT * FROM `your_database` WHERE `country` IN("'.implode('","', $countries).'")');
$stm->execute();
if($stm->rowCount() > 0){
foreach($stm->fetchAll(PDO::FETCH_ASSOC) as $row){
$results['states'] .= '<option value="'.$row['stateName'].'">'.$row['stateName'].'</option>';
}
}
echo json_encode($results);
}
}
我會那樣做。 希望這里足夠讓您滾動。
嘗試使用jquery ajax請求。 像這樣的東西
jQuery的
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#paramscountries').change(function(){
$.ajax({
url: 'states.php'
,data:{val: $(this).val()}
,dataType:'json'
,type: 'POST'
,success:function(data){
for(var i = 0; i < data.length; i++){
var dropDownValue = '<option value="'+ data[i] +'">'+ data[i] +'</option>'
$('#secondDropDownList').append(dropDownValue);
}
}
});
});
});
</script>
在states.php中
$con=mysqli_connect("localhost","user","password","db_Name");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if(isset($POST['val'])){
$var = $_POST['val'];
$result = mysqli_query($con,"SELECT * FROM table_name WHERE table_column_name = '$var'");
$arr = array();
while($row = mysqli_fetch_array($result)) {
$arr[] = $row['name'];
}
echo json_encode($arr);
}
mysqli_close($con);
在HTML中
<select id="secondDropDownList"></select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.