Java Script 表格（form）问题的求助!!!用户选择某个选项后要使相应的选项出现

以下是我的代码……哪位高手能帮我一把，我需要在外部文件中加入java script使用户在选择了某一选项后，相关的dropdown list会出现。
比如，你最喜欢的食物如果选择了pizza，那mexican和thai的选项会隐藏，然后pizza的会出现。
我自己也看了很久的教程，试了很多次还是做不出来，拜托了~~~~~帅哥们

<!DOCTYPE html>

<html>
<head>
<title>Prac 8 example</title>

<script type="text/Javascript" src="prac8.js"></script>

<style>
#section2, #section3, #section4 {
display:inherit; border:1px solid gray; padding:8px; margin-top:12px; width:400px;
}
#dessertmsg {
color:green;
}
</style>

</head>

<body>

<h1>Prac 8 example</h1>

<h2>A Food Survey</h2>

<form id="survey" action="#" method="post">

<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food" onchange="selection()">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section2">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
<div id="section3">
What is your favourite Mexican food?<br>
<label for="burrito">Burritos</label><input type="radio" id="burrito">
<label for="chilli">Chilli con carne</label><input type="radio" id="chilli">
<label for="taco">Tacos</label><input type="radio" id="taco">
</div>
<div id="section4">
What is your favourite Thai food?<br>
<label for="stir">Stir-fry</label><input type="radio" id="stir">
<label for="noodle">Noodles</label><input type="radio" id="noodle">
<label for="curry">Curry</label><input type="radio" id="curry">
</div>
<label for="dessert">What is your favourite dessert?*</label>
<input type="text" id="dessert" onchange="checkForm()"><br>
<div id="dessertmsg"> </div>

<input type="submit" value="Submit" id="subbutton" disabled>
</form>

</body>
</html>

举报该问题

其他回答

第1个回答推荐于2016-02-16

首先说明一点：<select id="food" onchange="selection()">中的方法名字selection()要修改为一个其他的名字，比如selectOnChange() 或 test(), 我用火狐浏览器测试没有问题，但是IE浏览器老是报错，改个名字就好了。
----------------------- prac8.js ----------------
function selection(){
var selObj = document.getElementById("food");
var selIndex = selObj.options.selectedIndex;
var selOption=selObj.options[selIndex];
var selValue = selOption.value;

var divPizza=document.getElementById("section2");
var divMex=document.getElementById("section3");
var divThai=document.getElementById("section4");
if(selValue=="pizza"){
divPizza.style.display="block";
divMex.style.display="none";
divThai.style.display="none";
}else if(selValue=="mex"){
divPizza.style.display="none";
divMex.style.display="block";
divThai.style.display="none";
}else if(selValue=="thai"){
divPizza.style.display="none";
divMex.style.display="none";
divThai.style.display="block";
}
}
------------------------------------------------
注意：html页面也有相应修改：
1. <body onload="selectOnChange()">
2. <select id="food" onChange="selectOnChange()">
3. <div id="section2" style="display:block">
4. <div id="section3" style="display:none">
5. <div id="section4" style="display:none">本回答被提问者采纳

第2个回答 2012-05-06

可以到中国最大的 IT 网站 CSDN
上面有很多高手的，可以在线帮你解决问题的
http://hi.csdn.net/invite.php?u=1328028&c=bc469d6e5e08795a追问

在论坛发帖还要点数……我发不了贴，试过了= =

第3个回答 2012-05-06

http://hi.csdn.net/invite.php?u=1328028&c=bc469d6e5e08795a追问

是要我加你吗??然后呢……

追答

no！

追问

......................................

追答

......................................