基于另一个下拉动态下拉更新
我希望有人可以帮助引导我在正确的方向。我目前有一个文件,我将其称为data.php。在这个文件中,我有以下数据:基于另一个下拉动态下拉更新
$sports_arr = array();
$sports_arr[] = "Basketball";
$sports_arr[] = "Baseball";
$sports_arr[] = "Football";
我也有同样的data.php文件中的以下数组:
$position = array();
$position['Basketball'][] = "Power Forward";
$position['Basketball'][] = "Small Forward";
$position['Basketball'][] = "Center";
$position['Soccer'][] = "Center Forward";
$position['Soccer'][] = "Right Wing";
$position['Soccer'][] = "Left Wing";
$position['Football'][] = "Halfback";
$position['Football'][] = "Fullback";
$position['Football'][] = "Wide Reciever";
$position['Football'][] = "Tight End";
$position['Football'][] = "Center";
的问题是,我试图找出如何有第一个下拉菜单,目前正在填充以下代码:
<div class="selectStyled">
<select name="Sport1" class="styled">
<option id="default" value="">Your Sport</option>
<?php natsort($sports_arr);
foreach ($sports_arr as $key => $val) {
echo "<option value='" . $val . "' id='position" . $key . "'>" . $val . "</option>";
} ?>
</select>
</div>
这里是我遇到问题的地方。我想要的是基于上面的下拉菜单的结果(例如用户选择棒球),我希望第二个下拉菜单填充正确的位置数组。所以,如果他们选择篮球,那么它会立即动态地在篮球职位上填充第二个下拉页面。如果他们改变了主意并选择了足球,那么它将随着足球位置动态地填充第二个下拉列表。
这里的任何帮助表示赞赏。我正在打一个大路障......谢谢!
请尝试:
<?php
$sports_arr = array();
$sports_arr[] = "Basketball";
$sports_arr[] = "Baseball";
$sports_arr[] = "Football";
$position = array();
$position['Basketball'][] = "Power Forward";
$position['Basketball'][] = "Small Forward";
$position['Basketball'][] = "Center";
$position['Soccer'][] = "Center Forward";
$position['Soccer'][] = "Right Wing";
$position['Soccer'][] = "Left Wing";
$position['Football'][] = "Halfback";
$position['Football'][] = "Fullback";
$position['Football'][] = "Wide Reciever";
$position['Football'][] = "Tight End";
$position['Football'][] = "Center";
?>
<div class="home">
<select id="s1">
<?php foreach($sports_arr as $sa) { ?>
<option value="<?php echo $sa; ?>"><?php echo $sa; ?></option>
<?php } ?>
</select>
<select id="s2">
</select>
</div>
<script type="text/javascript">
var s1= document.getElementById("s1");
var s2 = document.getElementById("s2");
onchange(); //Change options after page load
s1.onchange = onchange; // change options when s1 is changed
function onchange() {
<?php foreach ($sports_arr as $sa) {?>
if (s1.value == '<?php echo $sa; ?>') {
option_html = "";
<?php if (isset($position[$sa])) { ?> // Make sure position is exist
<?php foreach ($position[$sa] as $value) { ?>
option_html += "<option><?php echo $value; ?></option>";
<?php } ?>
<?php } ?>
s2.innerHTML = option_html;
}
<?php } ?>
}
</script>
大多数时候,人们使用AJAX,但如果你的网络速度太慢,Ajax并不是好办法。
这太棒了!十分感谢你的帮助!将这个工作融入到我当前的代码库中......代码的一部分是我从中学到的东西......任何想法,我可以在这里找到更多有关这方面的知识以了解更多信息?我必须在谷歌中使用错误的搜索条件。再次感谢你 – lobstahcrushah 2013-04-10 18:27:58
你想要如果用户从第一个下拉菜单中选择篮球,所有第二个下拉菜单中的篮球阵列显示记录。
所以你应该在第一个下拉列表的onChange()事件上使用AJAX函数。
你用ajax做。 – 2013-04-10 04:41:48
http://www.prodiven.com/jcombo/index.php?lang=en – 2013-04-10 04:43:31
调用ajax函数并传递相关的键并加载下拉菜单。 – 2013-04-10 04:43:36