我正在使用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> 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> 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>
答案 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> 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> 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>