通过下拉框绑定Js函数来切换内容，为什么在弹出框中内容只能叠加，不能切换

通过下拉框绑定JS函数，来切换一个DIV的内容，我在页面中可以实现，但是在弹出框中切换时内容只能叠加，不能切换，希望各位指教。

HTML代码如下：

<div class="ruleContent">
    <form action="" id="basic" style="display:block">
            <p>平台：</p>                  
            <p>文件：<input type="file" name="" id=""></p>
            <p><input type="button" value="提交"> </p>
    </form>
</div>
<form action="" id="gen" style="display:none">
    <p>规则内容：<textarea name="" id=""></textarea ></p>
    <p><input type="button" value="提交"></p>
</form>
 <select onchange="change()" id="#rule">
     <option value="basic">basic</option>
     <option value="gen">gen</option>
 </select>

js代码如下：

var ruleContentDiv = $(".ruleContent");
function changeRule(){
    var rule = $("#rule").val();
    if(rule == 'basic'){showBasic();}
    if(rule == 'gen'){showGen();}
}
function showBasic(){
    var basicForm = $("#basic");
    ruleContentDiv.find("form").hide();
    ruleContentDiv.append(basicForm);
    basicForm.show();

}
function showGen(){
    var genForm = $("#gen");
    ruleContentDiv.find("form").hide();
    ruleContentDiv.append(genForm);
    genForm.show();
}

弹出框用的artdialog插件

$(document).on("click","#id",function(){
    var html = "";
    html += '上面那段HTML代码';
    art.dialog({...});
});

本来能正常切换的代码在弹出层中却只能叠加，望指教。