HTML JAVASCRIPT 或 PHP 如何使选择中的选项依赖于另一个选择中选择的选项答案

【问题标题】：HTML JAVASCRIPT or PHP how to make options in select dependent on option selected in another selectHTML JAVASCRIPT 或 PHP 如何使选择中的选项依赖于另一个选择中选择的选项
【发布时间】：2013-07-27 03:04:24
【问题描述】：

我有两个选择

<select name="firstselect" id="firstselect">
<option value="optionOne">optionOne</option>
<option value="optionTwo">optionTwo</option>
</select>

<select name="secondselect" id="secondselect">
<option value="secondOptionOne">secondOptionOne</option>
<option value="secondOptionTwo">secondOptionTwo</option>
<option value="secondOptionThree">secondOptionThree</option>
<option value="secondOptionFour">secondOptionFour</option>
<option value="secondOptionFive">secondOptionFive</option>  
</select>

我希望第二次选择中的选项根据用户在第一次选择中选择的选项进行更改。我怎样才能在 Javascript 或 PHP 中做到这一点？

【问题讨论】：

有很多关于 SO 的问题。你先搜索了吗？
是的，我在这个网站和互联网上进行了搜索，但找不到我可以使用的解决方案。一种解决方案是针对 JQuery。另一个用于asp。我需要 Javascript 或 PHP 的东西。而且我也没有使用 MySQL。我在 Javascript 中找到了一种解决方案，但它不起作用。

标签： javascript html drop-down-menu

【解决方案1】：

我遇到了和你一样的问题。如果两个列表具有相同的元素并且列表“firstselect”的第一个元素与列表“secondselect”的第一个元素相关，则以下 javascript 编写在与 <head> 标记对应的空间内，这可能很有用，列表“firstselect”的第二个元素与列表“secondselect”的第二个元素相关，依此类推。

<script language="javascript" type="text/javascript">
// <!CDATA[
function Select1_onclick() {
    var SelectList1 = document.getElementById('firstselect');
    var SelectList2 = document.getElementById('secondselect');
    SelectL2.selectedIndex = LSelectL1.selectedIndex;
// ]]>
</script>

您还应该修改列表“firstselect”的<select> 标记，以通过这种方式包含上述脚本：

<select name="firstselect" id="firstselect" onclick="Select1_onclick()">

如果您假装做出不同的选项选择，您可以使用 switch-case 结构（参见示例 here）。

【讨论】：

【解决方案2】：

我在这里找到了一个很好的解决方案： http://www.webdeveloper.com/forum/showthread.php?91848-How-do-I-make-one-lt-select-gt-list-dependent-on-the-selection-made-in-another

这不是我的代码，但我希望它有所帮助。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>select change 2nd select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript">
    var varieties=[
    ["varieties","granny smith","golden delicious","jonathan"],
    ["varieties","anjou","bartlett","conference"],
    ["varieties","valencia","pineapple","pera"]
    ];

    function Box2(idx) {
    var f=document.myform;
    f.box2.options.length=null;
    for(var i=0; i<varieties[idx].length; i++) {
        f.box2.options[i]=new Option(varieties[idx][i], i); 
        }    
    }
    </script>

    </head>
    <body onload="Box2(0);">
    <form name="myform" method="post" action="http://www.mysite.com/mysite">
    <fieldset>
    <select name="box1" onchange="Box2(this.selectedIndex)">
        <option value="a">apple</option>
        <option value="b">pear</option>
        <option value="c">orange</option>
    </select>
    <select name="box2">

    </select>
    </fieldset>
    </form>
    </body>
    </html>

【讨论】：