如何改变select标签中所有option的值
radio标签代码如下：
- HTML code
<td><input type="radio" name="region" value="south" checked="checked"/>南<input type="radio" name="region" value="north"/>北</td>
- HTML code
<select name="region3" id="options1" size="1"><option value="竹">竹</option><option value="海">海</option><option value="丁">丁</option> </select>
这里有两个radio元素，默认选中的是“南”，希望改选为“北”或由“北”改选为“南”的话，自动更改select标签中所有option的值，使之由三个option变为两个option,且值分别为“东”和“西”，该如何实现？
[解决办法]
设radio的class为"xiaoqu"
- JScript code
$(".xiaoqu").change(function(){ });
[解决办法]
- JScript code
<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>
[解决办法]
<!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 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>
这样试试
[解决办法]
不用太复杂。简单的就Ok了。
<!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>
[解决办法]
优化为以下方案，希望对楼主有所帮助！！！
<!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=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>
[解决办法]
楼主，你知道为什么会这么多热心的人帮你贴代码吗？而且是这么完整的代码。。。
其实你这个问题非常非常的简单，就是先清空select的options。再重新添加就解决了。。。
关键是你给的分啊。。。100分啊。。。我怎么感觉像富二代啊。。。一般这种问题最多最多也就值个20分。。
嘿嘿！