Question

用户应在选择某些组后选择主机。我已经使用JQuery chained remote Plugin构建了一个链式选择，用于通过组选择主机。以下代码正在使用并正常工作：

$('#hosts').remoteChained({
    parents: "#hosts_group",
    url: "ajax/getHosts"
 });

   <select id="hosts_group" name="hosts_group" class="form-control">
         <option value="">Bitte Gruppe selektieren</option>
         <option value="1>Some Groups</option>
   </select>

   <select id="hosts" name="hosts"></select>

但是最终结果应该为主机提供duallistbox，用户可以从任何组中选择主机。我尝试将多个标记添加到主机选择并通过以下代码段添加JQuery DuallistBox：

 $('#hosts').remoteChained({
    parents: "#hosts_group",
    url: "ajax/getHosts"
 }).DualListBox({json: false});

duallist框显示正常，但选择组时没有显示主机。

JSON数据如下所示：

[
    {'name': 'host1', 'id': '1'},
    {'name': 'host2', 'id': '2'}
]

选择其他组时，json还包含不同的主机。链式选择插件通过以下请求请求数据：ajax / getHosts /？hosts_group = selectedId

使用带有正常多重选择的链式选择可以正常工作。问题是在duallist框中显示每个选择不同的json数据。

我曾尝试构建一个JsFiddle示例，但它无法正常工作，因为外部库无法加载，我也不太了解如何通过不同的选择手动提供json。< / p>

Answer 1

好的，我认为我的工作方式与你想要的一样。问题源于DualListBox在remoteChained完成填充选择框之前尝试初始化自身的事实。理想的解决方案是在remoteChained完成，初始化DualListBox。不幸的是，remoteChained似乎没有回调函数，这使得这更加棘手。这是我的（略带hacky）解决方案：

$(document).ready(function() {
    // setup remote chained
    $('#hosts').remoteChained({
        parents: "#hosts_group",
        url: "ajax/getHosts"
    });

    // set up dualList when change is triggered
    $('#hosts_group').on("change", function() {

        // if the option wasn't the first one
        if($(this).find("option:selected").val() != "") {
            setUpDualList();
        } else {
            // left as an exercise
            //putHostsSelectBoxBackIfItWasDestroyedByDualList();
        }
    });
});

function setUpDualList() {
    if(!hostsChanged()) {
        // because there's no callback, we have continually check if json is complete
        setTimeout(function() { setUpDualList(); }, 300);
    } else {
        // this actually does it.
        $("#hosts").DualListBox({json:false});
    }
}

function hostsChanged() {
    /*
    * this is VERY simplistic.  It will have to handle if #hosts was
    * 'changed' to have the same content, or if it was changed to 
    * something that has the same number of options, etc.  This ONLY
    * works for the very simple case you presented above.
    */
    return $("#hosts").find("option").length != 0;
}

HTML可以保持不变：

<select id="hosts_group" name="hosts_group" class="form-control">
    <option value="">Bitte Gruppe selektieren</option>
    <option value="1">Some Groups</option>
</select>

<select id="hosts" name="hosts"></select>

但是，由于DualListBox具有破坏性，因此最好创建“hosts”选择和“hosts_destroyable”选择。可破坏的选择将简单地复制ajax完成的“主机”，初始化DualList，并隐藏“主机”。当需要再次隐藏DualList时（因为用户更改了选择了哪个组），则需要重新创建“hosts_destroyable”。

因此。以上是简短的，hacky，是的 - 这是工作，但它需要帮助的解决方案。以下是一步一步的完整解决方案。

初始化remoteChained
将#hosts_group更改为有效组：
1. $（ “＃主机”）显示（）;
2. 监控#hosts并找出remoteChained何时成功完成json请求。
3. 请求完成后，将#hosts复制到临时#hosts_temp
4. $（ “＃hosts_temp”）DualListBox（{JSON：假}）。
5. $（ “＃主机”）隐藏（）;
将#hosts_group更改为无效组（例如“Bitte Gruppe selektieren”）：
1. 销毁DualListBox（不确定创建了什么，如果存在则以某种方式从DOM中删除）
2. $（ “＃主机”）显示（）;

JQuery在链接选择

1 个答案: