gpt4 book ai didi

javascript - HTML/Javascript 双下拉菜单不起作用

转载 作者:行者123 更新时间:2023-12-02 17:32:17 25 4
gpt4 key购买 nike

我按照本指南设置了一个双下拉菜单:http://coursesweb.net/javascript/multiple-select-dropdown-list-javascript_t#doublesl

我添加了自己的选项,似乎第二个下拉列表不再显示。为什么会这样?

    <!-- The first select list -->
Select WebSite: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
<option>- - -</option>
<option value="amazon">Amazon</option>
<option value="apple">Apple</option>
<option value="keurig">Keurig</option>
<option value="nike">Nike</option>
</select>
<!-- Tags for the seccond dropdown list, and for text-content -->
<span id="slist2"></span> <div id="scontent"></div>

<script><!--
/* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
var SList = new Object(); // JS object that stores data for options

// HERE replace the value with the text you want to be displayed near Select
var txtsl2 = 'Select Category:';

/*
Property with options for the Seccond select list
The key in this object must be the same with the values of the options added in the first select
The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
"amazon": ['kindle fire hd', 'kindle charger', 'kindle fire hd'],
"apple": ['macbook', 'imac', 'iphone', 'ipad']
"keurig": ['platinum', 'vue']
"nike": ['fuel band']
};


/*
Property with text-content associated with the options of the 2nd select list
The key in this object must be the same with the values (options) added in each Array in "slist2" above
The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
*/
SList.scontent = {
"kindle fire hd": 'www.marplo.net/ajax/',
"kindle charger": 'www.marplo.net/jocuri/',
"kindle fire hd": 'www.marplo.net/anime/',
"macbook": 'coursesweb.net/php-mysql/',
"imac": 'coursesweb.net/javascript/',
"iphone": 'coursesweb.net/flash/',
"ipad": 'www.marplo.net/ajax/',
"platinum": 'www.marplo.net/jocuri/',
"vue": 'www.marplo.net/anime/',
"fuelband": 'coursesweb.net/php-mysql/'
};

/* From here no need to modify */

// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content

if(SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else if(slist == 'slist2') {
var addata = '<option>- - -</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}

document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
}
}
else if(slist == 'slist2') {
// empty the tag for 2nd select list
document.getElementById('slist2').innerHTML = '';
}
}
--></script>

最佳答案

对控制台的简单检查将显示您有语法错误。当出现问题时,第一步是检查 JavaScript 错误!

SList.slist2 对象中缺少逗号,该逗号分隔数组(或哈希表,如果您愿意)中的对象

你想要:

SList.slist2 = {
"amazon": ['kindle fire hd', 'kindle charger', 'kindle fire hd'],
"apple": ['macbook', 'imac', 'iphone', 'ipad'],
"keurig": ['platinum', 'vue'],
"nike": ['fuel band']
};

示例:http://jsfiddle.net/A32k5/1/

关于javascript - HTML/Javascript 双下拉菜单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22951138/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com