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

【问题标题】：Cannot refresh multiple list views after elements have been appended添加元素后无法刷新多个列表视图
【发布时间】：2012-04-25 21:52:45
【问题描述】：

我正在使用 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 函数中有一个注释行，我已经阅读了很多内容：刷新方法，应该实现它来解决我的问题。我已经尝试了无数种方法来做到这一点，显然还不够。

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

【问题讨论】：

标签： html ajax listview jquery-mobile append

【解决方案1】：

编辑

抱歉，我发现它是移动的为时已晚..

试试$(next_list).selectmenu('refresh', true);

【讨论】：

您好里索，感谢您的快速回复。我尝试了这个选项，但它们不起作用。问题仍然存在，我尝试添加 options.html("");紧随 var option = $(x);我可以在第一个列表中选择元素，第二个列表已正确填充和清空，但它不允许我选择其上的元素。
我编辑了答案，尝试一下，如果这不起作用..我没有得到你的问题，对不起
感谢 riso 的帮助 :) 我仍然没有足够的声望为你投票，但你帮我找到了答案。我所要做的就是一个 switch(next_list){case "pet": options.html("").append("");break;} 并为我拥有的每个案例做案例，效果很好 :) 我将尽快增强功能并发布解决方案，您将能够看到它。
正确答案之前的事情是这样吗？我可以把它改回来..如果你认为它是正确的答案，投票是检查的地方，那个答案是正确的
这不是正确的答案，但它引导我找到了答案，它给了我一个好主意，我试了一下。由于您试图放置旧代码的位置，我认为如果它在那里不起作用，它必须在更受控的环境下工作，在这种情况下是 switch 语句。再次感谢您的帮助:)

【解决方案2】：

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

在 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;

}

可以增强此代码以在更改父选择时清除子选择。我还在开发这个功能，如果有人需要你可以要求它，我相信我会尽快完成。

【讨论】：