读书人

高手请问select自动选择有关问题

发布时间: 2012-02-26 20:19:43 作者: rapoo

高手请教select自动选择问题
我现在有二个下拉框,第一个下拉框中的内容包含第二个下拉框的内容,如第一个中有一项为 国家标准,第二个下拉框中就有相对应的如中国国家标准,美国国家标准等等。我现在要达到一个这样的目的,就是我在第一个下拉框中选择了如国家标准,第二个中就相应出现它所属的标准,请问用JAVASCRIPT如何实现?我是用STRUTS开发的,有没有其它办法完成这个功能?

[解决办法]
<html>
<head>
<title> </title>
<script language= "javascript ">
//关于缩进的变量定义
var prefixIndent = "-- ";
var prefixPrefix = String.fromCharCode(160,160);//从一组Unicode编码返回一个字符串,此处为返回由两个空格组成的字符串。

//清空下拉框
function fnClearCombo(objCombo){
var i,intLen;
if(objCombo.Proced ==1){
intLen=objCombo.options.length;
for(i=0;i <intLen-objCombo.FirstIdx;i++) objCombo.options[objCombo.FirstIdx]=null;
}
else{
objCombo.FirstIdx=objCombo.options.length;
objCombo.Proced =1;
}
}


function findArrIndex(optionV,arrItems){
var indexArr;
for(var i=0;arrItems[i];i++)
if(arrItems[i][0]==optionV) {indexArr=i;break;}
return indexArr;
}

/*************************************** 联动下拉框 ***************************************/
//subLevel:显示的子项层数
// 0--不显示任何子项;1--显示1层子项;2--显示2层子项...
//self :是否显示当前项,即是否在子下拉框里显示父下拉框的当前选项
// 1--显示
//objCombo:父下拉框 objSubCombo:子下拉框 arrSubItems:二维数组名 strDefValue:默认选中项的id
function fnSetPositionVac(objCombo,objSubCombo,arrSubItems,subLevel,self,strDefValue,submessage){
var message=submessage;
var i;
var bFound;
var oOption;
var pre=(self==1)?(prefixPrefix+prefixIndent): ' ';//如果形参self的值为1(即要在子下拉框中显示当前的父选项),则定义子选项的前缀pre为“ --”

fnClearCombo(objSubCombo);//清空子下拉框的值

bFound=false;

if(!objCombo.disabled){
var num = 0;
for(i=0;i <objCombo.length;i++) if(objCombo.options[i].value==objCombo.value){num=i;break;}
var arrIndex = findArrIndex(objCombo.options[num].value,arrSubItems);

/*if(self==1 && parseFloat(arrIndex)> =0){
var newoptiontext = (objSubCombo.size> 1)?arrSubItems[arrIndex][2].replace(/中国/g, '全国 '):arrSubItems[arrIndex][2];
oOption = new Option(newoptiontext,arrSubItems[arrIndex][0]);
objSubCombo.options[objSubCombo.length] = oOption;
if(strDefValue + " " == oOption.value + " ") oOption.selected=true;
}*/

if(subLevel> 0) bFound = fnAddSubItems(objCombo.options[num].value,objSubCombo,arrSubItems,strDefValue,pre,subLevel-1,submessage);
}

/*if(!bFound && objSubCombo.options.length == 0){objSubCombo.disabled=true;if(parseFloat(objSubCombo.size) <=1) objSubCombo.style.display= 'none ';} //如果 objSubCombo 的 size> 1 则始终不隐藏
else{objSubCombo.disabled=false;objSubCombo.style.display= ' ';if(objSubCombo.selectedIndex <0) objSubCombo.selectedIndex=0;} //默认选中第一个option(如果strDefValue为null)*/
if(!bFound && (objSubCombo.options.length == 0 || (objSubCombo.options.length == 1&&objSubCombo.options[0].text.indexOf( '选择 ')> -1))) objSubCombo.disabled = true;
else objSubCombo.disabled = false;
if(objSubCombo.size> 1) objSubCombo.style.display = ' ';
else{
if(objSubCombo.options.length <1) objSubCombo.style.display = 'none ';
else objSubCombo.style.display = ' ';
}

if(objSubCombo.onchange) objSubCombo.onchange();
}
function fnAddSubItems(pId,objSubCombo,arrSubItems,strDefValue,strPre,subLevel,m){
var n=m;
var i,j,oOption;
var bFound=false;
var text,value;
var level = subLevel;


for(i=0;i <arrSubItems.length;i++)
if(arrSubItems[i][1] + " " == pId + " "){
text = strPre + arrSubItems[i][2];
value = arrSubItems[i][0];

//if(!bFound && objSubCombo.size <=1) objSubCombo.options[objSubCombo.length] = new Option( ' ', ' ');

oOption = new Option(text,value);
objSubCombo.options[objSubCombo.length] = oOption;
if(strDefValue + " " == oOption.value + " ") oOption.selected=true;
bFound = true;

if(level> 0) fnAddSubItems(arrSubItems[i][0],objSubCombo,arrSubItems,strDefValue,prefixPrefix+((strPre== ' ')?prefixIndent:strPre),level-1)
}

if(objSubCombo.options[0].value== ' '){
if(pId== ' ') objSubCombo.options[0].text= '请选择 ';
else objSubCombo.options[0].text= '不限 ';
}

return bFound;
}
/*************************************** end 联动下拉框 ***************************************/
</script>
<script language= "javascript " type= "text/javascript ">
<!--
var arrBooktype=[
[ 'gongju ', '0 ', '工具书 '],
[ 'sanwenxiaoshuo ', '0 ', '散文小说 '],
[ 'jiaocai ', '0 ', '教材 '],
[ '001 ', 'gongju ', '新华词典 '],
[ '002 ', 'gongju ', '最新新华字典 '],
[ '003 ', 'gongju ', '现代成语辞典 '],
[ '004 ', 'gongju ', '辞海 '],
[ '005 ', 'gongju ', '中英双语词典 '],

[ '001 ', 'sanwenxiaoshuo ', '朱自清散文集 '],
[ '002 ', 'sanwenxiaoshuo ', '鲁迅文集 '],
[ '003 ', 'sanwenxiaoshuo ', '呐喊 '],
[ '004 ', 'sanwenxiaoshuo ', '告别夹边沟 '],

[ '001 ', 'jiaocai ', 'ASP程序设计 '],
[ '002 ', 'jiaocai ', '计算机应用基础 '],
[ '003 ', 'jiaocai ', '会计原理 '],
[ '004 ', 'jiaocai ', '毛泽东思想 '],
[ '005 ', 'jiaocai ', '法律基础 ']
]

function fnOnload(){
fnSetPositionVac(document.frmMain.booktype,document.frmMain.bookname,arrBooktype,1,0);
}
window.onload = fnOnload;
//-->
</script>
</head>

<body>
<form name= "frmMain " method= "get " action= " ">
请选择图书名称: <select name= "booktype " onChange= "fnSetPositionVac(this,this.form.bookname,arrBooktype,1,1,0) " style= "width:200px ">
<option value= " "> 请选择图书类别 </option>
<option value= "gongju "> 工具书 </option>
<option value= "sanwenxiaoshuo "> 散文小说 </option>
<option value= "jiaocai "> 教材 </option>
</select>
<select name= "bookname " style= "width:200px ">
<option value= " "> 请选择图书名称 </option>
</select>
</form>
</body>
</html>

读书人网 >JavaScript

热点推荐