问题描述
大家好，我需要一些帮助，使一个下拉菜单对一组选项中包含的类反应。我想做的是让用户选择手册（我将打电话给小册子菜单），并根据这些选项中包含的类别，第二个下拉菜单基于第一个。
例如选择此选项：
< option id =parRight class =eng kor esp> Special Ed。父母权利< / option>
将创建第二个下拉菜单，我将调用语言选择下拉菜单基于英语韩语和西班牙语的类别，仅分别在该特定选项的类中表示的语言。
到目前为止只能在第一次尝试时才能正确填写列表。我的问题是，当我继续从第一个菜单中选择另一个小册子时，我的 .append 方法只是添加到第一个语言选择下拉菜单。
以下是相关代码：
HTML
< select id =docs>
< option> - 选择要预览的文档 - < / option>
< option id =specEdclass =eng kor viet esp chin>特殊教育程序< / option>
< option id =parRightclass =eng kor esp> Special Ed。父母权利< / option>
< option id =cacclass =eng esp> CAC Brochure< / option>
< / select>
< div id =langs>
< ul style =display：none;>
< li> - 选择语言 - < / li>
< li class =eng>英文< / li>
< li class =esp>Español< / li>
< li class =kor>한국어< / li>
< li class =viet>TiếngViệt< / li>
< li class =chin>中文< / li>
< / ul>
< / div>
jQuery
var $ select = $（< select>< / select>）;
$（＃langs）。append（$ select）;
function englishTest（lang）{
return lang.hasClass（eng）;
}
函数spanishTest（lang）{
return lang.hasClass（esp）;
}
函数koreanTest（lang）{
return lang.hasClass（kor）;
}
function chineseTest（lang）{
return lang.hasClass（chin）;
}
函数vietnameseTest（lang）{
return lang.hasClass（viet）;
$（＃docs）。change（function（）{
console.log（test）;
var $ selection = $ #docs选项：selected）;
if（englishTest（$ selection）=== true）{
console.log（english pass）;
$ select.append（< option> English< / option>）;
}
if（spanishTest（$ selection）=== true）{
console.log 西班牙语通行证）;
$ select.append（< option>Español< / option>）
}
if（koreanTest（$ selection）=== true）{
console.log（korean passing）;
$ select.append（< option>한국어< / option>）
}
if（chineseTest ）==
console.log（chinese pass）;
$ select.append（< option>中文< / option>）
}
if（vietnameseTest（$ selection）=== true）{
console.log（vietnamese passing）;
$ select.append（< option>TiếngViệt< / option>）
}
}）;
我知道这段代码是重复的，我不是这个粉丝。我也会喜欢一些关于如何清理这个代码的指针，使其成为我坚持DRY 不要重复自己编码。感谢提前。
在我的代码中，当您点击下拉菜单时，另一个下拉菜单是从类中创建的选项。我创建了一个类的地图，用于在新的下拉列表中输出选项。我希望你明白。如果你有任何问题让我知道。
$（function（）{var map = {eng：English，esp：Español，kor ：한국어，viet：TiếngViệt，chin：中文} $（＃docs）on（change，function（）{//解释.attr（）//让我们说你的html看起来像这样=== //< option id =specEdclass =eng kor viet esp chin>特殊教育程序< / option> // .attr（class）将创建一个所有类的字符串，如：'eng kor viet esp chin'var selected = $（option：selected，this）.attr（class）; //然后你用空格拆分字符串以得到一个arr like [ eng，kor，viet，esp，chin] var arr = selected.split（）; console.log（arr）// [eng，kor，viet ，esp，chin] //接下来，删除附加的旧下拉列表，如果`.added`不在那里，它将不会删除//然后是删除附加新的下拉列表//所以在每个更改事件你要删除旧的并附加新的。 $（。added）。remove（）$（body）。append（< select class ='added'>）//由于类的字符串被拆分成数组，可以使用数组方法[forEach] [1] arr.forEach（function（e）{//`e`是`arr` $（。added）中的每个元素。append（< option>+ map [e] +< / option>）; //所以map [eng] ==English然后去映射[kor] etc .. //你应该知道JavaScript对象如何工作}）}）}） code> < script src =https：//ajax.googleapis。 com / ajax / libs / jquery / 2.1.0 / jquery.min.js>< / script>< select id =docs> < option> - 选择要预览的文档 - < / option> < option id =specEdclass =eng kor viet esp chin>特殊教育程序< / option> < option id =parRightclass =eng kor esp> Special Ed。父母权利< / option> < option id =cacclass =eng esp> CAC Brochure< / option>< / select>
/ p>
Hello everyone I need some help making a drop down menu that is reactive to classes contained in a set of options. What I want to do is have users select brochures (I'll call the brochure menu) and based on the classes contained in those options, a second drop down menu is populated based on the classes in the first.
For example selecting this option:
<option id="parRight" class="eng kor esp">Special Ed. Parents Rights</option>
Would create a second drop down I'll call the language selection drop down menu based on the classes above of "English" "Korean" and "Spanish" respectively and only those languages represented in the classes of that particular option.
So far I have been able to populate the list correctly only on the first try. My problem is that when I move on and select another brochure from the first menu my .append method is just adding to the first language selection drop down menu.
Here is the relevant code:
HTML
<select id="docs">
<option>- Choose a document to preview -</option>
<option id="specEd" class="eng kor viet esp chin">Special Education Programs</option>
<option id="parRight" class="eng kor esp">Special Ed. Parents Rights</option>
<option id="cac" class="eng esp">CAC Brochure</option>
</select>
<div id="langs">
<ul style="display:none;">
<li>-Select a Language-</li>
<li class="eng">English</li>
<li class="esp">Español</li>
<li class="kor">한국어</li>
<li class="viet">Tiếng Việt</li>
<li class="chin">中文</li>
</ul>
</div>
jQuery
var $select = $("<select></select>");
$("#langs").append($select);
function englishTest(lang) {
return lang.hasClass("eng");
}
function spanishTest(lang) {
return lang.hasClass("esp");
}
function koreanTest(lang) {
return lang.hasClass("kor");
}
function chineseTest(lang) {
return lang.hasClass("chin");
}
function vietnameseTest(lang) {
return lang.hasClass("viet");
}
$("#docs").change(function(){
console.log("test");
var $selection = $("#docs option:selected");
if (englishTest($selection) === true) {
console.log("english passing");
$select.append("<option>English</option>");
}
if (spanishTest($selection) === true) {
console.log("spanish passing");
$select.append("<option>Español</option>")
}
if (koreanTest($selection) === true) {
console.log("korean passing");
$select.append("<option>한국어</option>")
}
if (chineseTest($selection) === true) {
console.log("chinese passing");
$select.append("<option>中文</option>")
}
if (vietnameseTest($selection) === true) {
console.log("vietnamese passing");
$select.append("<option>Tiếng Việt</option>")
}
});
I am aware that this code is repetitive and I'm not a fan of that. I'd also appreciate some pointers on how to clean this code up and make it so I'm adhering to DRY Don't Repeat Yourself coding. Thanks in advance.
In my code when you click on the drop down another drop down is created from the classes form the original options. I made a map of classes to languages that will be used to output the options in the new dropdown. I hope you understand. If you have any questions let me know.
$(function(){
var map = {
"eng" : "English",
"esp" : "Español",
"kor" : "한국어",
"viet" : "Tiếng Việt",
"chin" : "中文"
}
$("#docs").on("change", function(){
//explanation of .attr()
// lets say your html looks like this ===
//<option id="specEd" class="eng kor viet esp chin">Special Education Programs</option>
// .attr("class") will create a string of all the classes like : 'eng kor viet esp chin'
var selected = $("option:selected", this).attr("class");
//then you split the string by spaces to get an arr like ["eng", "kor", "viet", "esp", "chin"]
var arr = selected.split(" ");
console.log(arr) //["eng", "kor", "viet", "esp", "chin"]
//Next, remove the old dropdown that was appended. If `.added` was not there it will remove nothing
//Then after it is removed append the new dropdown
//so, on every change event you're removing the old and appending the new.
$(".added").remove()
$("body").append("<select class='added'>")
//since the string of classes are split into an array you can use the array method of [forEach][1]
arr.forEach(function(e){
//`e` is each element in `arr`
$(".added").append("<option>"+map[e]+"</option>");
// so map[eng] == "English" then it goes to map[kor] etc..
// you should know how JavaScript objects work
})
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="docs">
<option>- Choose a document to preview -</option>
<option id="specEd" class="eng kor viet esp chin">Special Education Programs</option>
<option id="parRight" class="eng kor esp">Special Ed. Parents Rights</option>
<option id="cac" class="eng esp">CAC Brochure</option>
</select>这篇关于使用jQuery的网站动态下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！