用于 HTML 中动态下拉列表的 JavaScript onchange 事件

Question

I am not sure if I am wording this correctly. I have a dropdown menu, that when an option is selected, the second dropdown pops in and has options for the selected value. This all works great, but now I am trying to give a button to add more dropdowns in JavaScript. The first works, but I cannot get the second value to show.

HTML code:

<table class="table-container">
     <tbody><tr><td>
        <select class="custom-select" id="mediaSel" name="mediaSel" onchange="dropDownSelect(this.id, 'mediaSel2')">
        <option value="">--Select--</option>
        <option value="Illustration" name="Illustration">Illustration</option>
        <option value="GraphicDesign" name="GraphicDesign">Graphic Design</option>
        <option value="MotionGraphics" name="MotionGraphics">Motion Graphics</option>
        <option value="WebDesign" name="WebDesign">Web Design</option>
        </select>
             </td><td>
        <select class="custom-select" id="mediaSel2" name="mediaSel2"></select>
             </td><td class="buttonRow">
        <div id="addRow" class="addButton" onclick="addSelection()"><span class="plus"></span></div>
    </td></tr></tbody>
 </table>

So from here I was able to add the second dropdown when the onchange event has been fired.

JS code:

function dropDownSelect(s1,s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    var hideSel = document.getElementById("mediaSel2");
    s2.innerHTML = "";

    if(s1.value == "Illustration") {
       var optionArray = ["Select|--select--","ChildrensBooks|Childrens Book Design","FanArt|Fan Art","WallArt|Wall Art"];
    }
     else if(s1.value == "GraphicDesign") {
       var optionArray = ["Select|--select--","Logo|Logo","BusinessCards|Business Cards","Flyers|Flyers","Billboards|Billboards","MagazineAds|Magazine Ads","CatalogeDesign|Cataloge Design","NewsPaperAds|Newspaper Ads"];
    }
    else if(s1.value == "MotionGraphics") {
       var optionArray = ["Select|--select--","LogoAnimation|Logo Animation","Explainers|Explainer Videos","ShortFilms|Short Film Animation","CharacterDesign|Character Design","ProductDesign|Product Design","Animation|Animation"];
    }
    else if(s1.value == "WebDesign") {
       var optionArray = ["Websites|Websites"];
    }

    if(s1.value == "GraphicDesign" || s1.value == "Illustration" || s1.value == "MotionGraphics" || s1.value == "WebDesign") {
      s2.style.display="inline-block";
    } else {
      s2.style.display="none"; 
    }

    for(var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}

Like I said this all works great. but the final step is where I am struggling. I have the addButton in HTM that when clicked runs the next js code and gives me the dropdown.

I can't seem to figure out how to attach the function dropDownSelect from above.

addButton JS:

function addSelection() {
    var html = '<tr><td><select class="custom-select addClick" id="mediaSel" name="mediaSel" onchange="dropDownSelect2(this.id, "mediaSel2")"><option value="">--Select--</option><option value="Illustration" name="Illustration">Illustration</option><option value="GraphicDesign" name="GraphicDesign">Graphic Design</option><option value="MotionGraphics" name="MotionGraphics">Motion Graphics</option><option value="WebDesign" name="WebDesign">Web Design</option></select></td><td><select class="custom-select" id="mediaSel2" name="mediaSel2"></select></td><td class="buttonRow"><div id="removeRow" class="removeButton" onclick="removeSelection()"><span class="minus"></span></div></td></tr>';

    $('tbody').append(html);
}

any thoughts?

Answer 1

您需要转义函数调用参数周围的内部双引号：

var html = '... onchange="dropDownSelect2(this.id, \"mediaSel2\")"><option ...`;