基于三重选择下拉列表使用JavaScript显示/隐藏Div
帮派 这是我第一次发帖。我是一个JavaScript高手——我想我已经知道该朝哪个方向走了——只是不知道该怎么走 我有三个下拉选择菜单。我希望第三个最终选择显示一个隐藏的div。我认为我需要使用onchange、getElementById和if语句的组合,这是正确的吗 下拉列表的javascript代码是来自JavaScriptKit.com的Philip M的剪切粘贴三重组合框。那件作品很漂亮。我不会插入我的确切代码,因为类别列表要长得多基于三重选择下拉列表使用JavaScript显示/隐藏Div,javascript,Javascript,帮派 这是我第一次发帖。我是一个JavaScript高手——我想我已经知道该朝哪个方向走了——只是不知道该怎么走 我有三个下拉选择菜单。我希望第三个最终选择显示一个隐藏的div。我认为我需要使用onchange、getElementById和if语句的组合,这是正确的吗 下拉列表的javascript代码是来自JavaScriptKit.com的Philip M的剪切粘贴三重组合框。那件作品很漂亮。我不会插入我的确切代码,因为类别列表要长得多 var categories = []; categ
var categories = [];
categories["startList"] = ["Wearing Apparel","Books"]
categories["Wearing Apparel"] = ["Men","Women","Children"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];
var nLists = 3; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function getValue(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
}
function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
我的HTML是:
<div id="menuSearch">
<form name="tripleplay" action="">
<p><select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>-- Topic of Interest --</option>
</select></p>
<p><select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>-- Geographic Area --</option>
</select></p>
<select id="info"name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)">
<option selected >-- Information Type --</option>
</select>
</form>
</div>
要显示/隐藏的div包括:
<div id="modelingCV">list of publications</div>
<div id="groundwaterCV">list of publications</div>
<div id="subsidenceCV">list of publications</div>
<div id="managementCV">list of publications</div>
<div id="qualityCV">list of publications</div>
<div id="wildlifeCV">list of publications</div>
用getElementByID替换最终表单select中onchange中的getValue是最佳方法吗?并用某种类型的if语句替换javascript函数中的getValue以指定值?我猜我需要用javascript和CSS来隐藏div?我是不是完全偏离了基地
哦。这一次我吃不下了。任何指导都将不胜感激。谢谢你的阅读 我建议使用jqueryforjavascript这样的库。这会简化你的写作。你不会后悔使用它的。我不能没有它,因为我学会了如何使用它。贾维-这绝对是我正在发现的!同时,我将研究jquery解决方案。谢谢你的提示+jQuery为1;既然有了库,为什么还要重新设计函数。。