Question

所以我一直在修补这个问题，经过几个问题的讨论后，我得出的结论是，这不是一个非常常见的问题。

简而言之，我需要完成的是在更改状态时更新jQuery Mobile滑块。我正在编写一个系统，其中一组有三个切换：Unlocked / Locked / Approved。锁定和批准在两个单独的页面上完成。一旦群组被锁定，它就可以被批准。问题在于，当一个组“未批准”时，状态应更改为“已解锁”，然后更新为禁用。以下是我目前正在尝试的内容：

    if (action == 'uA') {
        slider.find('option').remove().end().append('<option value="U" selected>U</option>');
        slider.attr('disabled', true);
        slider.slider('refresh');
    }

理论上，这应该删除现有的两个选项（“L”和“A”），将其替换为选项“U”作为选定值，禁用滑块，然后使用jQuery的刷新调用更新视觉效果。然而，事实并非如此。看起来当值本身发生变化时 - 当jQuery最初渲染滑块时，实际的屏幕显示选项会单独存储，因此不会更新。

虽然我知道代码中并不明显，但我知道我的目标是正确的滑块，并且实际选择元素没有任何问题。关于我如何解决这个问题和/或解决它的任何想法？

编辑：根据要求，这里有一些代码可以让你们更好地了解正在发生的事情。

在.cshtml中（最初创建select / flip-switch的地方）：

         @if (timeGroup.Status == "A")
         {
            <select class="statusSlider" id="@timeGroup.ID" name="flipSwitch" data-role="slider" data-mini="true" style="position: absolute" data-inline="true">
            <option value="L">L</option>
            <option value="A" selected>A</option>
            </select>
         }
         else if (timeGroup.Status == "L")
         {
            <select class="statusSlider" id="@timeGroup.ID" name="flipSwitch" data-role="slider" data-mini="true" style="position: absolute" data-inline="true">
            <option value="L" selected>L</option>
            <option value="A">A</option>  
            </select>                         
         }
         else 
         {
            <select class="statusSlider" disabled id="@timeGroup.ID" name="flipSwitch" data-role="slider" data-mini="true" style="position: absolute" data-inline="true">
            <option value="U" selected>U</option> 
            </select> 
         }

这里有一些脚本：

function changeStatus(slider, dataUrl, action) {
    groupid = slider.attr("id");
    $.ajax({
        url: dataUrl,
        type: 'GET',
        data: { grpid: groupid, status: action },
        success: function (result) {
            if (result.Successful) {
                displayStatusColor(slider, result.ID, 1);
                if (action == 'uA') {
                    slider.find('option').remove().end().append('<option value="U" selected>U</option>');
                    slider.attr('disabled', true);
                    slider.slider('refresh');
                }
            } else {
                displayStatusColor(slider, result.ID, 0);
            }
        }
    });
    debug("DataUrl: " + dataUrl + " | GRP_ID: " + groupid + " | Status: " + action);
}

动态更新jQuery Mobile滑块（选择）的选项

0 个答案: