<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>
<body style="font-size:12px">
<p><h1>问题（1）:</h1></p>
<p>
<input type="radio" name="rb1" value="1" />
选择我下拉列表值消失
<input name="rb1" type="radio" value="2" checked="checked" />
选择我下拉列表值出现</p>
<p>
我是下拉列表：
<select name="s_1">
<option value="0">图书</option>
<option value="1">音象</option>
</select>
</p>
<hr/>
<p>我想要的效果就是：</p>
<p>当我选择第一个单选钮“<span class="STYLE1">选择我下拉列表值消失</span>”时候，下拉列表的值被改变。显示内容为“没有内容”</p>
<p>如：<span class="STYLE1">我是应该消失后的下拉列表：
<select name="select1">
<option value="2">没有内容</option>
</select>
</span></p>
<p>当我选择第二个单选钮“<span class="STYLE1">选择我下拉列表值出现</span>”时候,下拉列表的值恢复原样</p>
<p>如：<span class="STYLE1">我是下拉列表：
<select name="select2" >
<option value="0">图书</option>
<option value="1">音象</option>
</select>
</span></p>
<hr/>
<h1>问题（2）:</h1>
</p>
<p>现有两个下拉列表：</p>
<p>
列表1：
<select name="wen1">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
列表2：
<select name="wen2">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</p>
<p class="STYLE1">当我列表1选择A时候，列表2的值只有BCD</p>
<p class="STYLE1">就是相当于，列表1选择任何值的时候，列表2里面都不能显示列表1选中的值。</p>
</body>
</html>运行代码，看问题！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>
<body style="font-size:12px">
<p><h1>问题（1）:</h1></p>
<p>
<input type="radio" name="rb1" value="1" />
选择我下拉列表值消失
<input name="rb1" type="radio" value="2" checked="checked" />
选择我下拉列表值出现</p>
<p>
我是下拉列表：
<select name="s_1">
<option value="0">图书</option>
<option value="1">音象</option>
</select>
</p>
<hr/>
<p>我想要的效果就是：</p>
<p>当我选择第一个单选钮“<span class="STYLE1">选择我下拉列表值消失</span>”时候，下拉列表的值被改变。显示内容为“没有内容”</p>
<p>如：<span class="STYLE1">我是应该消失后的下拉列表：
<select name="select1">
<option value="2">没有内容</option>
</select>
</span></p>
<p>当我选择第二个单选钮“<span class="STYLE1">选择我下拉列表值出现</span>”时候,下拉列表的值恢复原样</p>
<p>如：<span class="STYLE1">我是下拉列表：
<select name="select2" >
<option value="0">图书</option>
<option value="1">音象</option>
</select>
</span></p>
<hr/>
<h1>问题（2）:</h1>
</p>
<p>现有两个下拉列表：</p>
<p>
列表1：
<select name="wen1">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
列表2：
<select name="wen2">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</p>
<p class="STYLE1">当我列表1选择A时候，列表2的值只有BCD</p>
<p class="STYLE1">就是相当于，列表1选择任何值的时候，列表2里面都不能显示列表1选中的值。</p>
</body>
</html>运行代码，看问题！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function show(flag){
if(flag){
$("sel1").style.display = "";
$("sel2").style.display = "none";
}else{
$("sel1").style.display = "none";
$("sel2").style.display = "";
}
}
function del(wen1){
var wen2 = $("wen2");
wen2.options.length = 0;
for(var i = 0; i < wen1.options.length; i++){
if(!wen1.options[i].selected){
wen2.options.add(new Option(wen1.options[i].innerHTML, wen1.options[i].value));
}
}
}
window.onload = function(){
del($("wen1"));
};
</script>
</head><body>
1.
<p>
<label><input type="radio" name="rb1" value="1" onclick="show(false)" />选择我下拉列表值消失</label>
<label><input name="rb1" type="radio" value="2" checked="checked" onclick="show(true)" />选择我下拉列表值出现</label>
</p>
<select name="sel1" id="sel1">
<option value="0">图书</option>
<option value="1">音象</option>
</select>
<select name="sel1" id="sel2" style="display:none">
<option value="2">没有内容</option>
</select>
<br />
2.
<p>
列表1：
<select name="wen1" id="wen1" onchange="del(this)">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
列表2：
<select name="wen2" id="wen2">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</body>
</html>