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

Question

我不确定我的措辞是否正确。我有一个下拉菜单，即选择一个选项时，第二个下拉流程子并具有所选值的选项。这一切都很好，但现在我试图提供一个按钮来在 JavaScript 中添加更多下拉菜单。第一个有效，但我无法显示第二个值。

HTML 代码：

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

因此，当 onchange 事件被触发时，我可以从这里添加第二个下拉列表。

JS代码：

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

就像我说的，这一切都很好。但最后一步是我挣扎的地方。我在 HTM 中有 addButton，单击它会运行下一个 js 代码并给我下拉菜单。

我似乎无法弄清楚如何从上面附加函数dropDownSelect。

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

有什么想法吗？

Answer 1

你需要对函数调用的参数周围的内部双引号进行转义：

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