html中select结合js的使用简介

//作用:
1.提供select的拷贝;
2.选择select1时动态选择添加select2中的值(值来源于:selectTotal).
//addedby: xufl
//addeddate:20070706
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
<!--
/*清空select所有option项*/
function clear()
{
 var obj = document.getElementById('select2');
 var length = obj.length;
 for (var j=length-1; j>=0; j--)
 {
  obj.options.remove(j);
 }
}
/*拷贝select1的option到select2中*/
function copy()
{
 var obj = document.getElementById('select1');
 var obj2 = document.getElementById('select2');
 clear();
 /*拷贝select1到select2中*/
 for (var i=0;i<obj.options.length ;i++ )
 {
  var oOption = document.createElement("OPTION");
  obj2.options.add(oOption);
  oOption.innerText = obj.options[i].innerText;
  oOption.value = obj.options[i].value;
 } 
}
//选取配套值
function selectV()
{
 var obj2 = document.getElementById('select2');
 var key = document.getElementById('select1').value;
 var source = document.getElementById('selectTotal');
 if (key!="")
 {
  clear();
  /*拷贝selectTotal中相关记录到select2中*/
  for (var i=0;i<source.options.length ;i++ )
  {
   var str = source.options[i].value;
   if(key == str.substring(0,str.indexOf('.')))
   {
    var oOption = document.createElement("OPTION");
    obj2.options.add(oOption);
    oOption.innerText = source.options[i].innerText;
    oOption.value = source.options[i].value;
   }
  }    
 }
}
//-->
</script>
</HEAD>

<BODY>
<form name="musicForm">
 <strong>Select Copy</strong><hr>
 Select1:
 <select id="select1" onChange="selectV()">
 <option value="">
 <option value="key1">key1text
 <option value="key2">key2text
 <option value="key3">key3text
 <option value="key4">key4text
 </select>
 <p>
 Select2:
 <select id="select2">
 </select>
 <p>
 <input type="button" value="Copy Select's Options" onClick="copy()">
 <p>
 <!--用于提供选项资源-->
 <!--
  div层使用说明:

  　div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

　　style="visibility: none;"

　　document.getElementById("typediv1").style.visibility="hidden";//隐藏

　　document.getElementById("typediv1").style.visibility="visible";//显示

　　通过设置display属性可以使div隐藏后释放占用的页面空间，如下

　　style="display: none;"

　　document.getElementById("typediv1").style.display="none";//隐藏

　　document.getElementById("typediv1").style.display="";//显示

 -->
 <div style="visibility: hidden;">
 <select id="selectTotal" >
 <option value="key1.1">key1.text1
 <option value="key2.1">key2.text1
 <option value="key3.1">key3.text1
 <option value="key4.1">key4.text1
 <option value="key1.2">key1.text2
 <option value="key2.2">key2.text2
 <option value="key3.2">key3.text2
 <option value="key4.2">key4.text2
 <option value="key1.3">key1.text3
 <option value="key2.3">key2.text3
 <option value="key3.3">key3.text3
 <option value="key4.3">key4.text3
 </select>
 </div>
</form>
</BODY>
</HTML>