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

我有两个select

<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>

我希望secondselect中的选项根据用户在第一次选择中选择的选项进行更改。我如何在Javascript或PHP中做到这一点?

我和你有同样的问题。下面的javascript，写在<head>标签对应的空间里，如果两个列表有相同的元素，列表"firstselect"的第一个元素与列表"secondselect"的第一个元素相关，列表"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结构(见这里的例子)。

我找到了一个很好的解决方案: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>

相关内容

最新更新

热门标签：