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

Question

我正在使用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;               
            }
        }
    );
}
[请注意，我调用PHP函数来处理数据的后端提取，但是如果需要测试，可以对这些数据进行硬编码。另外，我在最后一个JS函数中有一条注释行，我已经阅读了很多有关此内容的信息：refresh方法，应将其实现以解决我的问题。我尝试了无数种方法，显然还不够。 

---

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

我正在使用jQuery Mobile从数据库中存储的信息填充一系列列表视图，每个列表视图以父子关系填充以下列表视图（例如：第一个列表视图允许...

Answer 1

编辑

Answer 2

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