调用 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>");