radio标签代码如下:<td>
<input type="radio" name="region" value="south" checked="checked"/>南
<input type="radio" name="region" value="north"/>北
</td>
<select name="region3" id="options1" size="1">
<option value="竹">竹</option>
<option value="海">海</option>
<option value="丁">丁</option>
</select>这里有两个radio元素,默认选中的是“南”,希望改选为“北”或由“北”改选为“南”的话,自动更改select标签中所有option的值,使之由三个option变为两个option,且值分别为“东”和“西”,该如何实现?
<input type="radio" name="region" value="south" checked="checked"/>南
<input type="radio" name="region" value="north"/>北
</td>
<select name="region3" id="options1" size="1">
<option value="竹">竹</option>
<option value="海">海</option>
<option value="丁">丁</option>
</select>这里有两个radio元素,默认选中的是“南”,希望改选为“北”或由“北”改选为“南”的话,自动更改select标签中所有option的值,使之由三个option变为两个option,且值分别为“东”和“西”,该如何实现?
});
<script type="text/javascript">
$(function () {
$(":radio[name='region']").change(function(){
var option = $("#options1")[0].options;
option[0].text = "东";
option[1].text ="西";
option.length = 2;
});
})
</script>
<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 init(){
var rs=document.getElementsByName("region");
for(var i=0;i<rs.length;i++){
rs[i].onclick=change;
}
}
function change(){
var se=document.getElementById("options1");
se.length=0;
if(this.getAttribute("value")=="south"){
var o1=new Option("竹","竹");
var o2=new Option("海","海");
var o3=new Option("丁","丁");
se[0]=o1;
se[1]=o2;
se[2]=o3;
}else{
var o1=new Option("东","东");
var o2=new Option("西","西");
se[0]=o1;
se[1]=o2;
}
}
window.onload=init;
</script>
</head><body>
<input type="radio" name="region" value="south" checked="checked"/>南
<input type="radio" name="region" value="north"/>北
<select name="region3" id="options1" size="1">
<option value="竹">竹</option>
<option value="海">海</option>
<option value="丁">丁</option>
</select>
</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 language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
radioBindEvent();
});
function radioBindEvent(){
$("input[type='radio'][name='region']").bind("change",function(){
$("#options1").html('<option value=\"东\">东</option>\n<option value=\"西\">西</option>');
});
}
</script>
</head>
<body>
<input type="radio" name="region" value="south" checked="checked"/>南
<input type="radio" name="region" value="north"/>北
<select name="region3" id="options1" size="1">
<option value="竹">竹</option>
<option value="海">海</option>
<option value="丁">丁</option>
</select>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var str1 = '<option value=\"东\">东</option>\n<option value=\"西\">西</option>';
var str2 = '<option value=\"竹\">竹</option><option value=\"海\">海</option><option value=\"丁\">丁</option>';
//初始化
$("#options1").html(str2);
//选择‘北’
$("input[type='radio'][name='region'][value='north']").bind("change",function(){
$("#options1").html(str1);
});
//选择‘南’
$("input[type='radio'][name='region'][value='south']").bind("change",function(){
$("#options1").html(str2);
});
});
</script>
</head>
<body>
<input type="radio" name="region" value="south" checked="checked"/>南
<input type="radio" name="region" value="north"/>北
<select name="region3" id="options1" size="1"></select>
</body>
</html>
嘿嘿!