使用javascript为下拉列表赋值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用javascript为下拉列表赋值相关的知识,希望对你有一定的参考价值。

我有wriiten javascriot两个级别的下拉选择值,我在第二个下拉列表中得到值。现在发生了什么,数组中的值被分配到第二个下拉列表。我想将URL作为值分配到第二个下拉列表并将它们重定向到那些下拉列表。在我的下面示例中,如果我选择服装然后我得到男性和女性的第二次下拉菜单,所以如果我选择男性在第二次下拉列表中它应该去xyz.com ....所以对于第二个下拉列表中的每个选项,我希望将其重定向到特定的URL我该怎么办?

<html>
<head>

<script type="text/javascript">

var categories = [];categories["startList"] = ["Apparel","Books"]
categories["Apparel"] = ["Men","Women"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];


var nLists = 2; // number of 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[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
//var nurl= url[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(isValue) {
alert(isValue);
}

function init() {
fillSelect('startList',document.forms[0]['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);    

</script>
</head>

<body>
<form action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<!--<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>-->
&nbsp;
<select name='List2' onchange="getValue(this.value)">
<option selected >Make a selection</option>
</select>
</form>

</body>
</html>
答案

首先,您需要将源数组修改为JSON格式,如下所示:

var categories = [];categories["startList"] = [{"text":"Apparel","url":"Apparel"},{"text":"Books","url":"Books"}]
categories["Apparel"] = [{"text":"Men","url":"xyz.com"},{"text":"Women","url":"abc.com"}];
categories["Books"] = [{"text":"Biography","url":"Biography.com"},{"text":"Fiction","url":"Fiction.com"},{"text":"Nonfiction","url":"Nonfiction.com"}];

现在,在函数中我们可以将它用作键值对:

var nLists = 2; // number of 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[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
//var nurl= url[currCat]
for (each in nCat)  {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]["text"]); 
nOption.setAttribute('value',nCat[each]["url"]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function getValue(isValue) {
//alert(isValue);
location.replace("http://" + isValue);
}

而已 !!!

以上是关于使用javascript为下拉列表赋值的主要内容,如果未能解决你的问题,请参考以下文章

js怎么添加一个下拉列表的值

Html页面中select下拉列表框别样用法,一个方法一劳永逸。

分别在javascript和JSP中动态设置下拉列表默认值

如何使用 css 或 javascript 将 ASP 下拉列表设置为只读?

js拼接实现下拉列表框

jquery select2 联动下拉列表赋值二级下拉列表赋不上值,怎么搞