通过从选择菜单中选择一个选项如何强制另一个选择菜单自动加载特定选项?

时间:2011-12-20 09:55:27

标签: php jquery

通过从选择菜单中选择一个选项,如何强制其他选择菜单自动加载特定选项?

我的意思是我有这个PHP代码:

   <select id="video_cattegory_main" name="video_cattegory_main" style="display:inline; width:95%">
            <?php $query_main_menue = "SELECT video_cattegory_main FROM video_tutorials GROUP BY video_cattegory_main";
            $main_menue = mysql_query($query_main_menue, $webiceberg) or die(mysql_error());
            while ($row_main_menue = mysql_fetch_assoc($main_menue))  {  ?>
            <option name="video_cattegory_main" value="<?php echo $row_main_menue['video_cattegory_main']?>" ><?php echo $row_main_menue['video_cattegory_main']?></option>
            <?php } ?>
          </select>

这个剂量加载从表格到选择菜单的值,我有另一个选择菜单就像这个,但在第二个我希望它根据第一个选择加载。

换句话说,什么是最好的方法,以便在选择菜单中自动选择一个选项时,它会强制另一个选择菜单中的默认值

这可以仅在php中完成,还是需要添加我对

知之甚少的js

3 个答案:

答案 0 :(得分:0)

是的,你必须为此目的使用javascript。当您在加载页面时加载第二个select-dropdownbox的所有值时,仅Javascript就足够了。

如果第二个下拉框的显示值取决于第一个选择框的选择,那么您可能需要AJAX,例如:当第一个下拉框显示一个国家/地区时,当您选择一个国家/地区时,您希望在该国家/地区之外显示某些城市!

根据您想要在第二个框中选择的内容,第一件事可以很容易地实现。如果您对javascript知之甚少,可以使用例如jquery,这是一个很棒的框架,可以很容易地解决这样的练习!

但为此您必须提供更多信息,了解哪个选择的selectbox 1应该自动选择selectbox 2的哪个选项!

您可以使用jquery的onchange()link)函数,例如看看那个简单的example!您可以通过http://api.jquery.com/val/

更改第二个选择框的选定值,而不是显示文字

答案 1 :(得分:0)

您可以在不使用任何Javascript的情况下使用PHP执行此操作,但这意味着您必须刷新页面。我会推荐Javascript。

使用PHP执行此操作的最佳方法是使用一个将数据发布到自身的表单。选择第一个选择框后,应该有一个提交按钮。

然后PHP脚本将检查是否已提交第一个选择。如果已经存在,则将基于来自第一个的值生成第二个。如果没有,表格将在没有第二次选择的情况下输出。

再次Javascript是一个更好的解决方案,因为PHP解决方案会引发其他问题,如处理其他表单变量。

答案 2 :(得分:0)

您需要使用Javascript。

PHP是一种服务器端编程语言。所以PHP代码在之前运行客户端能够看到网页。当网页在客户端可见时,PHP无法修改页面。

Javascript是一种客户端语言。它允许您修改DOM(HTML),而用户仍在查看该页面。

这段代码应该可以帮到你。

<select id="select-0">
    <option value="0">a0</option>
    <option value="1">a1</option>
    <option value="2">a2</option>
    <option value="3">a3</option>
</select>

<select id="select-1">
    <option value="0">b0</option>
    <option value="1">b1</option>
    <option value="2">b2</option>
    <option value="3">b3</option>
</select>

<script type="text/javascript">
// select a specific element
var element = document.getElementById('select-0');

// add a "listener" that allows you to run code when an event occurs
element.addEventListener('change', function() {
    // select-0 is changed, so we wish to change the value of select-1
});
</script>