geoddan 's双列表框:填充'selected'与不同的JSON文件(PHP)


Geodan's Dual List Box: populating 'selected' box with different JSON file (PHP).

目标是一个订阅页面,用户可以在其中选择要订阅的属性。这工作。

我有:我正在使用Geodan的插件,能够从左侧列表框(未选中)中选择项目,并将它们移动到右侧列表框(已选中)。左边的列表框是通过JSON填充的,如下所示:

<div class="form-group"> <label for="properties">Properties</label> <div id="dual-list-box" class="form-group row"> <select class="filter" name="dropdown[]" multiple="multiple" data title="Properties" data-source="properties.json" data-value="index" data-text="name"></select> </div> </div>

然后像这样调用:

$(document).ready(function() { $('.filter').DualListBox(); });

这很好。您可以从属性中移动属性。Json到右边的列表框。

我想要达到的目标:

尽管这个初始订阅页面工作得很好,但是假设用户想要编辑他们的订阅。也许他们最初订阅了10个属性,但现在他们想再增加10个。你想要的是:

-一个单独的页面,左侧列表框填充属性。json

-通过PHP生成的单独JSON文件填充右侧列表框(获取JSON文件很容易):但我不确定这个插件是否允许从外部源填充右侧列表框。

我大约一周前给Geodan发了邮件,但没有收到回复。

任何帮助我正在努力实现的是感激。我也开放使用其他插件,如果这将是一个更容易的路线。

不需要为左右列表框生成单独的JSON。您只需要将"selected"属性添加到右侧的选项中。

的例子:

<select id="ItemIds" name="ItemIds" multiple="multiple" data-title="Items" data-horizontal="false" data-json="false">
    <option value="1">Item 1</option>
    <option value="1" selected="selected">Item 2</option>
    <option value="3">Item 2</option>
    <option value="4" selected="selected">Item 4</option>
</select>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#ItemIds').DualListBox();
    });
</script>
参考https://github.com/Geodan/DualListBox/issues/5