JavaScript动态控制HTML <select>标签中<option>的默认选中属性
em:
<select>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
如下图，我要通过姓名栏的选择动态改变下面角色栏的默认显示选项。求解答。谢谢！
第1个回答 推荐于2016-11-19
首先你要让这两个select有关联，姓名中的值必须有可以传递给角色中可以判断的才可以做。
下面给你一个相似的代码。便于你分析。
<!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">
<!--
.option1 {
color: #FFFFFF;
background-color: #0099FF;
}
.option2 {
color: #000000;
background-color: #FFFFFF;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
window.onload=function(){
var $id=function(id){
return document.getElementById(id);
}
$id("s1").onchange=function(){
var $name=s2.getElementsByTagName("option");
for(i=0;i<$name.length;i++){
if(this.value==$name[i].value){
$name[i].className="option1";
$id("s2").value=this.value;
}else{
$name[i].className="option2";
}
}
}
}
</script>
</head>
<body>
<select name="s1" id="s1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="s2" id="s2">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</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>
<style type="text/css">
<!--
.option1 {
color: #FFFFFF;
background-color: #0099FF;
}
.option2 {
color: #000000;
background-color: #FFFFFF;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
window.onload=function(){
var $id=function(id){
return document.getElementById(id);
}
$id("s1").onchange=function(){
var $name=s2.getElementsByTagName("option");
for(i=0;i<$name.length;i++){
if(this.value==$name[i].value){
$name[i].className="option1";
$id("s2").value=this.value;
}else{
$name[i].className="option2";
}
}
}
}
</script>
</head>
<body>
<select name="s1" id="s1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="s2" id="s2">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>本回答被提问者和网友采纳
相似回答