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


By selecting an option from the select menu how to force another select menu to automatically load a specific option?

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

我的意思是我有这个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

是的,你必须使用javascript来实现这个目的。当加载页面时加载第二个选择下拉框的所有值时,仅使用Javascript就足够了。

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

第一件事可以很容易地实现,这取决于您想在第二个框中选择什么。如果你对javascript知之甚少,你可以使用jquery,这是一个很棒的框架,可以很容易地解决这样的问题!

但是对于这个,你必须给出更多的信息,关于选择框1的哪个选项应该自动选择选择框2的哪个选项!

你可以使用jquery的onchange()(链接)函数,例如,看看这个简单的例子!除了显示文本,还可以通过http://api.jquery.com/val/

更改第二个选择框的选定值

您可以使用PHP而不使用任何Javascript,但这意味着您必须刷新页面。不过我还是推荐使用Javascript。

在PHP中最好的方法是有一个表单向自己发送数据。在第一个选择框被选中之后,应该有一个提交按钮。

PHP脚本将检查第一个选择是否已提交。如果存在,则将根据第一个的值生成第二个。如果没有,则输出的表单将不包含第二个选择。

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

你需要使用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>