Question

大家好我需要帮助制作一个下拉菜单，该菜单对一组选项中包含的类有反应。我想要做的是让用户选择小册子（我将调用小册子菜单）并根据这些选项中包含的类，根据第一个类中的类填充第二个下拉菜单。

例如选择此选项：

<option id="parRight" class="eng kor esp">Special Ed. Parents Rights</option>

将创建第二个下拉列表我将分别根据“英语”“韩语”和“西班牙语”的上述类别调用语言选择下拉菜单，并且仅显示在该特定选项的类别。

到目前为止，我只能在第一次尝试时正确填充列表。我的问题是，当我继续从第一个菜单中选择另一个小册子时，我的.append方法只是添加到第一个语言选择下拉菜单。

以下是相关代码：

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>")
    }       
});

我知道这段代码是重复的，我不是那样的粉丝。我也很欣赏有关如何清理这些代码的一些指示，并使其成为我坚持DRY 不要重复自己编码。提前谢谢。

Answer 1

在我的代码中，当您单击下拉列表时，将从原始选项的类中创建另一个下拉列表。我制作了一个类的语言映射，用于输出新下拉列表中的选项。我希望你明白。如果您有任何问题，请告诉我。

＆＃13;

$(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

    })
  })
})

＆＃13;

<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>

＆＃13;

Answer 2

对于DRY编码，我建议替换这些函数

function englishTest(lang) {
    return lang.hasClass("eng");
}

有这样的东西

function testLanguage(selection, lang) {
    return selection.hasClass(lang);
}

然后将其称为

testLanguage($selection, "eng") === true

对于您的主要问题，您似乎总是在选择更改时附加内容，但您从不清除任何内容。

使用jQuery for Website的动态下拉菜单

2 个答案: