JQuery select 链接后多个 select

Question

用户应该 select 在 select 访问一些群组后主持。我已经通过组为 selecting 主机构建了一个带有 JQuery chained remote Plugin 的链式 select。正在使用以下代码并且工作正常：

$('#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>

但最终结果应该为主机提供一个双列表框，用户可以在其中 select 来自任何组的主机。我尝试将多个标签添加到主机 select 并通过以下代码段添加 JQuery DuallistBox：

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

双列表框显示正常，但是当我select组时没有主机显示。

JSON 数据如下所示：

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

当 select 访问不同的组时，json 也包含不同的主机。链式 select 插件通过以下请求请求数据：ajax/getHosts/?hosts_group=selectedId

只需将链式 select 与普通倍数 select 一起使用就可以了。问题是在双列表框中显示 json 数据，每个 select 数据不同。

我尝试构建一个 JsFiddle 示例，但它没有用，因为外部库不会被加载，而且我真的不明白如何通过不同的 [=手动提供 json =39=]s.

Answer 1

好的，我想我已经按照您想要的方式工作了。问题源于 DualListBox 试图在 remoteChained 完成填充 select 框之前初始化自身。理想的解决方案是在 remoteChained 完成时，初始化 DualListBox。不幸的是，remoteChained 似乎没有回调函数，这使得这有点棘手。这是我的（有点老套）解决方案：

$(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"select和一个"hosts_destroyable"select可能会更好。可销毁的 select 会在 ajax 完成时简单地复制 "hosts"，初始化 DualList，然后隐藏 "hosts"。当需要再次隐藏 DualList 时（因为用户更改了 selected 的组），则需要重新创建 "hosts_destroyable"。

所以。上面是简短的、hacky 的、是的，这是可行的，但它需要帮助的解决方案。下面是一步一步的完整解决方案。

初始化remoteChained
将#hosts_group 更改为有效组：
1. $("#hosts").show();
2. 监控 #hosts 并找出 remoteChained 何时成功完成 json 请求。
3. 请求完成后，将#hosts复制到临时#hosts_temp
4. $("#hosts_temp").DualListBox({json:false})
5. $("#hosts").hide();
将#hosts_group更改为无效组（例如"Bitte Gruppe selektieren"）：
1. 销毁 DualListBox（不确定创建的是什么，如果它存在则以某种方式从 DOM 中删除）
2. $("#hosts").show();

JQuery select 链接后多个 select

JQuery select multiple after chained select

javascript

jquery

select

chained