关于js处理下拉框选中事件的问题，求大神帮忙解决
我想要实现的功能是，当点击subject列表中的第二个选项时，文本框变为只读；当点击第三个选项时，文本框可编辑，subject1列表隐藏。这是代码：<%@pagelang...
我想要实现的功能是，当点击subject列表中的第二个选项时，文本框变为只读；
当点击第三个选项时，文本框可编辑，subject1列表隐藏。
这是代码：
<%@page language="java" contentType="text/html;charset=gb2312"%>
<html>
<title>直播后台入口</title>
<body>
<script type="text/javascript">
function selection(){
var rtl=document.getElementById("subject");
if(rtl=="no"){
document.getElementById("subjectName").readOnly=true;
document.all["subject1"].style.visibility="visible";
}
if(rtl=="yes"){
document.getElementById("subjectName").readOnly=false;
document.all["subject1"].style.visibility="hidden";
}
}
</script>
<table border="2" width="350px" height="260" bgColor="#80ff00">
<form>
<tr>
<td border="2">请选择：</td>
<td><select name="subject" id="subject" onchange="selection()">
<option value="defult" selected>是否新建会议主题？</option>
<option value="no">不，我要选择已存在的会议主题</option>
<option value="yes">是的，我要新建会议主题</option>
</select>
<select id="subject1">
<option value="大会一" >大会一</option>
<<option value="大会二" >大会二</option>
<option value="大会三" >大会三</option>
</select>
</td>
<tr >
<td>直播主题：</td>
<td><input type="text" id="subjectName" ></td>
</tr>
<tr>
<td>直播员：</td>
<td><input type=text>
</td>
</tr>
<tr>
<td><input type="submit" value="提交" /></td>
<td><input type="reset" name="rest" id="rest" value="重置">
</td>
</tr>
</form>
</table>
</body>
</html> 展开
当点击第三个选项时，文本框可编辑，subject1列表隐藏。
这是代码：
<%@page language="java" contentType="text/html;charset=gb2312"%>
<html>
<title>直播后台入口</title>
<body>
<script type="text/javascript">
function selection(){
var rtl=document.getElementById("subject");
if(rtl=="no"){
document.getElementById("subjectName").readOnly=true;
document.all["subject1"].style.visibility="visible";
}
if(rtl=="yes"){
document.getElementById("subjectName").readOnly=false;
document.all["subject1"].style.visibility="hidden";
}
}
</script>
<table border="2" width="350px" height="260" bgColor="#80ff00">
<form>
<tr>
<td border="2">请选择：</td>
<td><select name="subject" id="subject" onchange="selection()">
<option value="defult" selected>是否新建会议主题？</option>
<option value="no">不，我要选择已存在的会议主题</option>
<option value="yes">是的，我要新建会议主题</option>
</select>
<select id="subject1">
<option value="大会一" >大会一</option>
<<option value="大会二" >大会二</option>
<option value="大会三" >大会三</option>
</select>
</td>
<tr >
<td>直播主题：</td>
<td><input type="text" id="subjectName" ></td>
</tr>
<tr>
<td>直播员：</td>
<td><input type=text>
</td>
</tr>
<tr>
<td><input type="submit" value="提交" /></td>
<td><input type="reset" name="rest" id="rest" value="重置">
</td>
</tr>
</form>
</table>
</body>
</html> 展开
1个回答
展开全部
var rtl=document.getElementById("subject");
改为
var rtl=document.getElementById("subject").value;
你原来的语句，rtl得到的是SELECT元素，而不是它OPTION值，所以后面的if判断就全为false了。
另外，你的if那部分代码，虽然没错，但每次运行都要判断两次，建议写成
iif(rtl=="no"){
document.getElementById("subjectName").readOnly=true;
document.all["subject1"].style.visibility="visible";
}else if(rtl=="yes"){
document.getElementById("subjectName").readOnly=false;
document.all["subject1"].style.visibility="hidden";
}
这样写的话，如果rtl==“no”就只判断一次了，效率会快些。
虽然在小项目中，这样的代码在执行上完全感觉不出不同，但在大项目中就不一样了。
养成一个良好的习惯，对你以后绝对受用。
改为
var rtl=document.getElementById("subject").value;
你原来的语句，rtl得到的是SELECT元素，而不是它OPTION值，所以后面的if判断就全为false了。
另外，你的if那部分代码，虽然没错，但每次运行都要判断两次，建议写成
iif(rtl=="no"){
document.getElementById("subjectName").readOnly=true;
document.all["subject1"].style.visibility="visible";
}else if(rtl=="yes"){
document.getElementById("subjectName").readOnly=false;
document.all["subject1"].style.visibility="hidden";
}
这样写的话，如果rtl==“no”就只判断一次了，效率会快些。
虽然在小项目中，这样的代码在执行上完全感觉不出不同，但在大项目中就不一样了。
养成一个良好的习惯，对你以后绝对受用。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
