根據數據庫中另一個下拉菜單中選擇的選項更新一個下拉菜單
[英]Updating one drop down menu according to option selected in another drop down menu from database
問題描述
修改后的建議（仍未解決）：
我有2個下拉菜單，一個叫“國家”，另一個叫“城市”。 當用戶從“國家/地區”下拉菜單中選擇一個國家/地區時（為簡便起見，此下拉菜單將被稱為DDM），我希望City DDM顯示該特定國家/地區中的所有城市。
我在數據庫中具有以下簡單形式的關系（稱為location ）（帶有某些條目）：
id country city
1 India New Delhi
2 India Hyderabad
3 USA San Diego
4 USA Palo Alto
這是我寫的代碼：
<html>
<head>
<title>Admin Page</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var country=$(this).val();
var dataString = 'country='+ country;
alert(dataString);
$.ajax
({
type: "POST",
url: "getcity.php",
data: dataString,
dataType : html,
cache: false,
success: function(data, textStatus)
{
alert(textStatus);
$(".city").html(data);
}
});
});
});
</script>
<body>
<br />
<legend><h2>Welcome Admin!</h2></legend>
<?php
include('db.php');
$sql="SELECT distinct country FROM location";
$result=mysqli_query($con, $sql);
if (!$result)
{
echo "DB Error, could not list tables\n";
echo 'MySQL Error: ' . mysql_error();
exit;
}
echo '<h4>Location :</h4>';
echo '<select name="loaction" class="location">';
echo '<option value="foo">'.'Choose Country'.'</option>';
while ($row=mysqli_fetch_array($result))
{
echo '<option value='.$row[country].'>'.$row[country].'</option>';
}
echo '</select>';
?>
<h4><label>City :</label> </h4>
<select name = 'city' class = 'city'>
<option value = 'foo' > Choose City </option>
</select>
希望您能向下滾動並查看上面的代碼。 文件getcity.php如下：
<?php
include('db.php');
if($_POST['country'])
{
$country=$_POST['country'];
$sql=mysql_query("select id, city from location where country='$country'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$city=$row['city'];
echo '<option value="'.$id.'">'.$city.'</option>';
}
}
但是，即使從AJAX調用返回的狀態（通過alert（）看到）為“成功”，我也看不到City DDM中的任何內容。
我想念什么？
再次感謝。
4 個解決方案
解決方案1
0 2013-05-14 05:55:05
您肯定需要使用JavaScript。
我建議使用jQuery，因此您將在國家/地區列表中處理事件更改 ，並使其向服務器發送ajax調用並將結果作為json對象獲取，例如：
{
'country':{
'id' :10,
'name' 'France',
...
'cities':{
'1':'lille',
'2':'paris'
...
}
}
}
使用json-encode將結果編碼為php中的json對象，並使用.html更改第二個列表中的城市。
$(".cities_list").html("<option name='1'>lille</option><option name='2'>france</option> ...");
這是一個例子
解決方案2
0 2013-05-14 05:55:32
這是我的做法：
您需要兩個選擇器：
<select name="state" class="stateSelector" ></select>
<select name="city" class="citySelector" ></select>
還有一個jQuery ajax（獲取）調用，每次stateSelector類的選擇器更改時都會觸發：
$('.stateSelector').change(function(){
$.getJSON("http://site.com/getCities/"+$(this).val()+"/all",{}, function(j){
var options = '<option value="0">- CITY -</option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
}
$('.citySelector').html(options);
$('.citySelector').prop("selectedIndex", 0);
});
});
在服務器端，您需要調用一個URL（ http://site.com/getCities/ {stateId}），該URL將接收州ID並返回該特定州所有城市的JSON集合，在此示例中為JSON結構具有id（j [i] .id）和名稱（j [i] .name）。
解決方案3
0 2013-05-14 06:07:37
您將必須使用AJAX從數據庫中設置選項
在您的視圖文件中：
<script>
$(document).ready(function(){
$("#yourCountryDropDownID").live("change", function(){
var country = $(this).val();
$.ajax({
type: "GET",
url: "yourSiteUrl/getCities.php/?country="+country,
success: function(data){
$("#city_div").html(data);
}
});
});
})
</script>
您的城市下拉列表應位於ID為city_div的div中。 現在創建一個PHP文件getCities.php ，並將下面的代碼放入其中。
if(isset($_GET["country"]) && !empty($_GET["country"])){
//Your Code
//to get cities from country id
// will come here
}
不要忘記在您的視圖中導入jQuery。
解決方案4
0 2013-05-14 15:29:53
這是您的代碼的有效版本：
<html>
<head>
<title>Admin Page</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.country').change(function(){
$.get("http://172.17.0.2/getcity.php?country="+$(this).val(),{}, function(data){
$('.city').html(data);
$('.city').prop("selectedIndex", 0);
});
});
});
</script>
<body>
<br />
<legend><h2>Welcome Admin!</h2></legend>
<?php
$rows = array(
array('country' => 'India'),
array('country' => 'Brazil')
);
echo '<h4>Location :</h4>';
echo '<select name="country" class="country">';
foreach ($rows as $row)
{
echo '<option value='.$row['country'].'>'.$row['country'].'</option>';
}
echo '</select>';
?>
<h4><label>City :</label> </h4>
<select name = 'city' class = 'city'>
<option value = 'foo' > Choose City </option>
</select>
這是ajax將調用的腳本（getcity.php）：
<?php
include('db.php');
if($_GET['country'])
{
$rows = array(
array('country' => 'India', 'city' => 'Nova Delhi'),
array('country' => 'Brazil', 'city' => 'Rio de Janeiro')
);
foreach($rows as $row)
{
if($row['country'] == $_GET['country']) {
echo '<option value="'.$row['city'].'">'.$row['city'].'</option>';
}
}
}
在瀏覽器中對此腳本進行測試：
http://172.17.0.2/cityAjax.php?country=Brazil
在Chrome中，您可以
view-source:http://172.17.0.2/getcity.php?country=Brazil
該調用的源代碼應為：
<option value="Rio de Janeiro">Rio de Janeiro</option>
而且，當然，您必須編輯主機ip地址172.17.0.2。 :)
HTML。 隱藏/顯示下拉菜單，具體取決於是否在另一個下拉菜單中選擇了一個選項
[英]HTML. Hide/Show a drop down menu depending on if an option is selected on another drop down menu
根據另一個選擇的選項在下拉菜單中設置選項
[英]Setting the options in a drop-down menu based on the selected option of another
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.