如何通过从另一个下拉列表中选择值来填充下拉列表?
Posted
技术标签:
【中文标题】如何通过从另一个下拉列表中选择值来填充下拉列表?【英文标题】:How can i populate a dropdown list by selecting the value from another dropdown list? 【发布时间】:2012-12-06 20:19:01 【问题描述】:我通过从 mysql 数据库中获取两个下拉列表的记录来构建两个下拉列表(如州和城市),并尝试构建工具,在其中从第一个下拉列表中选择任何值(即任何状态)时,那时在第二个下拉列表(城市)中,只有在第一个下拉列表中选择的值(州)下的那些值(城市)应该是可见的。
这是我的代码:
<tr>
<td id='hed'><span style="font-family:verdana,geneva,sans- serif">State</state></td>
<td>
<?php
$dbcon = mysql_connect("@ip","@username","@password");
if($dbcon)
mysql_select_db("@database", $dbcon);
else
die('error connecting to the database');
$qry = "select @value(state) from @tablename ";
$result = mysql_query($qry) or die(mysql_error());
$dropdown = "<select name='@valuename' id='officeItemList' style='cursor:pointer;cursor:hand;'>";
while($row = mysql_fetch_array($result))
$dropdown .= "\r\n<option value='$row['@value']' > $row['@value'] </option>";
$dropdown .= "\r\n</select>";
echo $dropdown;
mysql_close($dbcon);
?>
</td>
</tr>
<tr>
<td id='hed'><span style="font-family:verdana,geneva,sans-serif">City</span></td>
<td colspan="1">
<?php
$dbcon = mysql_connect("@ip","@username","@password");
if($dbcon)
mysql_select_db("@database", $dbcon);
else
die('error connecting to the database');
$qry = "select value2(city) from @tablename where ";
$result = mysql_query($qry) or die(mysql_error());
$dropdown = "<select name='@value2' id='officeItemList' style='cursor:pointer;cursor:hand;'>";
while($row = mysql_fetch_array($result))
$dropdown .= "\r\n<option value='$row['@value2']' > $row['@value2'] </option>";
$dropdown .= "\r\n</select>";
echo $dropdown;
mysql_close($dbcon);
?>
</td>
</tr>
【问题讨论】:
你打算用 php 还是 javascript(AJAX) 来做这件事?这将告诉我们可能的解决方案是什么。 好的,你有什么错误吗?我的意思是你的代码有问题 技术上不擅长ajax,但我想在ajax技术上比较强,所以我的首选是ajax............ @jade 此代码用于从数据库中获取记录并显示它,直到 nw 我没有任何关于 ths 的代码,我正在研究 ths cencept .... 【参考方案1】:那是错误的方式。您的 PHP 代码在向用户显示页面之前完全执行。所以第二个查询永远不会知道用户选择了什么。
正确方法#1:分两页做。第一个页面包含第一个组合,当它被提交时,第二个页面被生成并显示第二个组合。
正确的方法 #2 尽管不是最佳的:在一页中完成。将第二个组合的所有可能记录加载到某个 JS 数组。将侦听器放置到第一个数组。当用户从 JS-array 中选择正确的记录填充第二个组合时。
正确方式#3(最右边):在包含 AJAX 请求的页面中执行此操作。用户在第一个组合中选择一个值。它的侦听器向某个服务器脚本发送请求,该脚本返回 JSON 对象以及第二个组合的记录。
【讨论】:
【参考方案2】:您可以使用 AJAX 获取所选州的城市。比如:
$("select#state").change(
function()
var state = $(this).val();
$.ajax(
type: "GET",
url: "get_cities.php/?state=" + state,
// write a query according to the state selected and return the html for the OPTION's
success: function(cities)
$("select#cities").html(cities);
);
);
您还可以返回一个 json 对象(在这种情况下不要忘记添加 dataType:"json"
)并在客户端(即 success
函数内)转换为 HTML
【讨论】:
【参考方案3】:我会向您推荐 2 种方法。
第一个仅使用 php,但需要在呈现页面之前存储每个州的所有可用城市。这是一个糟糕的解决方案!
我建议使用 AJAX 和对另一个 PHP 脚本的 Javascript 调用可以解决您的问题!
使用 jQuery 获得一个让生活更轻松的 javascript 框架!
您的 HTML:
<select id="select-state">
<option value="0">Select a state</option>
<option value="ohio">Ohio</option>
</select>
<select id="select-city">
<option value="0">Select a state first</option>
</select>
创建一个 php 脚本,通过 $_GET["state"](或 $_POST)使用给定状态进行 mysql 查询。
将来自 mysql 的结果编码为 JSON 对象并回显它!
cities: [
'City 1',
'City 2',
...
]
php函数:json_encode()
然后您可以执行以下操作:
$(function()
$('#select-state').on("change", function()
var state = $(this).val();
if(state!=0)
$.get('your/path/to/cities/script.php?state='+state,function(data)
if(data.cities)
$('#select-city').empty(); //remove old entries first
for (var city in data.cities)
$option = $('<option>').val(city);
$('#select-city').append($option);
);
);
);
【讨论】:
【参考方案4】:三个快速点:
-
mysql 不安全(应该使用 PDO 或 mysqli)
样式应该用 CSS 指定,而不是内联
您最好使用异步请求,这样用户体验感觉更快
请注意,以上所有三点都可以通过使用框架轻松实现(至少在客户端,如 CakePHP 或 Zend,但您也可以寻找类似 Knockout.js 的 JavaScript 用于 UI 交互)
【讨论】:
以上是关于如何通过从另一个下拉列表中选择值来填充下拉列表?的主要内容,如果未能解决你的问题,请参考以下文章
通过从下拉列表中选择字段名称来显示 mysql 表的字段数据