//作用:
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>