调用 remove() 后如何重新追加元素？

Question

我有一个 2 下拉列表，我希望第二个下拉列表的值根据用户为第一个下拉列表选择的内容而改变。

$( "#route" ).change(function(){
routeSelect = $(this).val();

$("#clear").remove();

switch(routeSelect){
    case 'Q':
        console.log(routeSelect);
        for(var i=0;i<routeQ.stopTitle.length;i++){
            $("#stopTitle").append("<option id=\"clear \" value="+ routeQ.stopTitle[i].name + ">"+ routeQ.stopTitle[i].name + "</option>");
        }
        break;
    case 'T':
        //$("#clear").remove();
        console.log(routeSelect);
        for(var i=0;i<routeT.stopTitle.length;i++){
            $("#stopTitle").append("<option id=\"clear \" value="+ routeT.stopTitle[i].name + ">"+ routeT.stopTitle[i].name + "</option>");
        }
        break;
    default:
        console.log(routeSelect);
        break;
}
});

当我第一次选择第一个下拉列表时，此代码有效，但在调用 remove() 之后它不再附加。

例如，我在第一个下拉列表中选择 Q，我的第二个空下拉列表正确附加，但是当我选择 T 时，第二个下拉列表不会改变。

Answer 1

结果转义字符不起作用，我需要手动添加“清除”。

$("#stopTitle").append('<option id="' + "clear"+ '" value="'+ routeQ.stopTitle[i].name + '">'+ routeQ.stopTitle[i].name + '</option>');

对比

$("#stopTitle").append("<option id=\"clear \" value="+ routeQ.stopTitle[i].name + ">"+ routeQ.stopTitle[i].name + "</option>");