Html 追加元素后无法刷新多个列表视图

我正在使用jQuery Mobile从数据库中存储的信息填充一系列列表视图，每个列表视图以父子关系填充以下列表视图（例如：第一个列表视图允许您选择动物，您选择狗，下一个列表视图填充血统，等等）

现在，我的代码正确地填充了列表视图，我的问题是，如果我返回到父列表视图并进行不同的选择，子列表视图不会刷新，我们最终会得到一堆附加信息。我到处都读过很多书，但我似乎找不到适合我的代码的正确实现

<ul data-role="listview" data-filter="false" data-inset="true" data-theme="a" data-divider-theme="a">
    <li>
        <label for="pet" class="select">Pet</label>
        <select id="pet" data-mini="true" onchange="fill_list('pedigree', this);">
            <option value=""></option>
        </select>
    </li>
    <li>
        <label for="pedigree" class="select">Pedigree</label>
        <select id="pedigree" data-mini="true" onchange="fill_list('pet_name', this);">
            <option value=""></option>
        </select>
    </li>
    <li>
        <label for="pet_name" class="select">Pet Name</label>
        <select id="pet_name" data-mini="true">
            <option value=""></option>
        </select>
    </li>
</ul>

function fill_list(next_list, this_list){
    var pet_url = server_root_url + 'controler/pet/find_pet.php';
    var value = this_list.options[this_list.selectedIndex].value;

    var params = {
        control: next_list,
        value: value
    };

    $.ajax({
    type: "POST",
    url: pet_url,
    async:false,
    data: params,
        success: function(json){
            do_fill_list(json, next_list);
        }
    });            
}            

function do_fill_list(json, next_list){
    var x = "#" + next_list;
    var option = $(x);

/*------------------------------------------------------------------------------
EDIT:
    Below is the solution I found for this issue. 
    Basically we capture the current list with the switch, empty it,
    append it with a blank line, then let the rest of the code populate the list.
-------------------------------------------------------------------------------*/
   switch(next_list){
        case "pet":
            options.html("").append("<option />");
            break;

        case "pedigree":
            options.html("").append("<option />");
            break;

        case "pet_name":
            options.html("").append("<option />");
            break;

    }
//-------------------------------------END EDIT------------------------------------
    $.each(json.control, 
        function(i,control){
            switch(next_list){
                case "pet":
                    option.append($("<option />").val(control.pet).text(control.pet));
                    break;
                case "pedigree":
                    option.append($("<option />").val(control.pedigree).text(control.pedigree));
                    break;
                case "pet_name":
                    options.append($("<option />").val(control.pet_name).text(control.pet_name));
                    break;               
            }
        }
    );
}

宠物


纯种


昵称


函数填充列表（下一个列表，此列表）{
var pet_url=server_root_url+'controller/pet/find_pet.php'；
var value=此列表。选项[此列表。selectedIndex]。值；
变量参数={
控制：下一个列表，
价值：价值
};
$.ajax({
类型：“POST”，
url:pet_url，
async:false，
数据：params，
成功：函数（json）{
填写列表（json，下一个列表）；
}
});            
}            
函数do_fill_list（json，下一个_list）{
var x=“#”+下一个_列表；
var期权=$（x）；
/*------------------------------------------------------------------------------
编辑：
下面是我为这个问题找到的解决方案。
基本上我们用开关捕捉当前列表，清空它，
用一个空行附加它，然后让其余的代码填充列表。
-------------------------------------------------------------------------------*/
开关（下一个列表）{
案例“宠物”：
options.html（“”）.append（“”）；
打破
案例“谱系”：
options.html（“”）.append（“”）；
打破
案例“宠物名”：
options.html（“”）.append（“”）；
打破
}
//-------------------------------------结束编辑------------------------------------
$.each（json.control，
功能（一、控制）{
开关（下一个列表）{
案例“宠物”：
option.append（$（“”）.val（control.pet）.text（control.pet））；
打破
案例“谱系”：
option.append（$（“”）.val（control.pedigree.text（control.pedigree））；
打破
案例“宠物名”：
options.append（$（“”）.val（control.pet_name）.text（control.pet_name））；
打破
}
}
);
}

请注意，我调用了一个PHP函数来处理数据的后端提取，但是如果需要测试数据，可以对其进行硬编码。另外，我在上一个JS函数中有一行注释，我已经读了很多关于它的内容：refresh方法，应该实现它来解决我的问题。我已经尝试了无数种方法，但显然还不够

---

编辑：我添加了一个switch语句来解决这个问题，它位于“do fill list”JS方法中。

EDIT

对不起，我发现太晚了，它是移动的

尝试

$（下一个列表）。选择菜单（'refresh'，true）

：（
下面的代码是我问题的答案（完整代码和已编辑的代码见上文。基本上，需要做的就是捕获所选列表视图，清空它并附加一个空选项。为什么是空选项？因为否则，您将单击列表视图，无法选择第一个选项；如果要更改它，您可能无法选择它

在do_fill_list方法中插入此代码，就在var option=$（x）和$之间。each（json.control（…）函数：

switch(next_list){
    case "pet":
        options.html("").append("<option />");
        break;

    case "pedigree":
        options.html("").append("<option />");
        break;

    case "pet_name":
        options.html("").append("<option />");
        break;

}

开关（下一个列表）{
案例“宠物”：
options.html（“”）.append（“”）；
打破
案例“谱系”：
options.html（“”）.append（“”）；
打破
案例“宠物名”：
options.html（“”）.append（“”）；
打破
}

此代码可以增强，以便在更改父项选择时清除子项选择。我仍在使用此功能，如果有人需要，您可以请求，我相信我会很快完成。
你好，Riso，感谢您的快速回复。我尝试了此选项，但不起作用。问题仍然存在，我尝试了添加选项。html（“”；在var option=$（x）之后；我可以选择第一个列表中的元素，第二个列表已正确填充并清空，但不允许我选择其中的元素。我编辑了答案，如果不起作用，请尝试。我没有收到您的问题，抱歉，谢谢您的帮助riso:）我仍然没有足够的声望来投票支持你，但你帮我找到了答案。我所要做的就是切换（下一个列表）{case“pet”：options.html（“”.append（“”）；break；}然后对我的每一个案例进行案例处理，效果很好：）我要提高功能和发布的解决方案很快，你会看到它。这是正确答案之前的事情？我可以改变它……如果你认为它是一个正确的答案，在投票是检查的地方，答案是正确的不是正确的答案，但它使我的答案，它给了我一个好主意，我尝试了O。ut.由于您尝试放置旧代码的位置，我认为如果它在那里不工作，它必须在更受控的环境下工作，在本例中是switch语句。再次感谢您的帮助：）