Dynamic drop down menus using jQuery for Website

Question

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.

Answer 1

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>

Answer 2

For the DRY coding, I would suggest replacing these functions

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

With something like this

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

And then calling it like

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

For your main question, you seem to be appending stuff always when the selection changes, but you never clear anything.