根据在另一个选择列表中选择的值填充一个选择列表

时间:2014-04-29 10:01:47

标签: javascript html jsp

我正在使用jsp创建一个接口。我有两个选择列表。我将根据第一个选择列表中的值填充第二个选择列表。

〔实施例:

选择列表一:GSM,CDMA

然后,

如果用户选择GSM,他应该在选择列表2中看到CRICKET,COMBO OFFER,ASTRO。或者如果用户选择CDMA,他应该在选择列表2中看到COMBO OFFER CDMA,VOICE CHAT,WIN THE DREAM

任何人都可以帮帮我吗?

这是代码

<tr>
<td style="color:white"> <font size="2"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SERVICE:</b></font> </td>
<td><select name="service" >
<option value="GSM">GSM</option>
<option value="CDMA">CDMA</option>
</select>
</td>


<td style="color:white"> <font size="2"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VAS :</b></font> </td>
<td><select name="service" >
<option value="COMBO OFFER">COMBO OFFER</option>
<option value="COMBO OFFER CDMA">COMBO OFFER CDMA</option>
<option value="WIN THE DREAM">WIN THE DREAM</option>
<option value="VOICE CHAT">VOICE CHAT</option>
<option value="CRICKET">CRICKET</option>
<option value="ASTRO">ASTRO</option>
</select>
</td>
</tr>

1 个答案:

答案 0 :(得分:1)

试试这样:

    <html>
<head>
<script language="JavaScript" type="text/javascript">
    function optionsChange(){   
        var service = document.getElementById("service").value;
        if(service == 'GSM'){   
            document.getElementById("cdmaService").value= '';
            document.getElementById("cdmaService").style.display = 'none';
            document.getElementById("gsmService").style.display = 'block';
        }else if(service == 'CDMA'){
            document.getElementById("gsmService").value= '';
            document.getElementById("cdmaService").style.display = 'block';
            document.getElementById("gsmService").style.display = 'none';
        }
    }
</script>
<head>
</head>
<body>
    <table>
    <tr>
        <td style="color:white"> <font size="2"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SERVICE:</b></font> </td>
        <td><select id="service" name="service" onChange="javascript:optionsChange();">
                <option value="GSM">GSM</option>
                <option value="CDMA">CDMA</option>
            </select>
        </td>
    </tr>
    <tr><td style="color:white"> <font size="2"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VAS :</b></font> </td></tr>
    <tr id="gsmService">
        <td><select name="gsmService" > 
                <option value="COMBO OFFER">COMBO OFFER</option>
                <option value="CRICKET">CRICKET</option>
                <option value="ASTRO">ASTRO</option>
            </select>   
        </td>
    </tr>   
    <tr id="cdmaService">
        <td><select name="cdmaService" >
            <option value="COMBO OFFER CDMA">COMBO OFFER CDMA</option>
            <option value="WIN THE DREAM">WIN THE DREAM</option>
            <option value="VOICE CHAT">VOICE CHAT</option>
            </select>
        </td>
    </tr>
    </table>
</body>

相关问题