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

我不确定我的措辞是否正确。我有一个下拉菜单，当选择一个选项时，第二个下拉菜单会弹出，并为所选值提供选项。这一切都很好，但现在我正试图提供一个按钮，在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>

就像我说的，这一切都很好。但最后一步是我在挣扎。我有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);
}

函数addSelection（）{
var html='--Select--IllustrationGraphic DesignMotion Graphics Web Design'；
$（'tbody'）.append（html）；
}

---

有什么想法吗？

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

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

---

var html=”。。。onchange=“dropDownSelect2（this.id，\“mediaSel2\”）”>没错，我现在觉得自己很愚蠢！与此相关的下一个问题。我现在可以显示下拉列表，但当我从第二组的第一个下拉列表中选择时，它会从第二个选项的第一个选择中删除该选项。跟柜台有关吗？
var html = '... onchange="dropDownSelect2(this.id, \"mediaSel2\")"><option ...`;