您的位置：首页 > Web前端 > JavaScript

html中select结合js的使用简介

2007-07-06 09:26 555 查看
//作用:
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航