Динамические выпадающие меню с использованием jQuery для веб-сайта

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

В моем коде, когда вы нажмете на раскрывающееся меню, из раскрывающихся списков создаются исходные параметры. Я сделал карту классов для языков, которые будут использоваться для вывода параметров в новом раскрывающемся списке. Надеюсь, вы понимаете. Если у вас есть какие-либо вопросы, дайте мне знать.

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

Answer 2

Для СУХОГО кодирования, я хотел бы предложить заменить эти функции

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

С чем-то вроде этого

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

А потом называть это как

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

Для Вашего основного вопроса, вы, кажется, добавляете вещи всегда, когда выбор меняется, но вы никогда ничего не очищаете.