怎么改变select标签中所有option的值
日期：2014-05-16 浏览次数：20368 次
如何改变select标签中所有option的值
radio标签代码如下：
这里有两个radio元素，默认选中的是“南”，希望改选为“北”或由“北”改选为“南”的话，自动更改select标签中所有option的值，使之由三个option变为两个option,且值分别为“东”和“西”，该如何实现？
------解决方案--------------------
设radio的class为"xiaoqu"
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
