如何使用 Jquery-option-tree 插件预加载 <options> 和 <select>答案

【问题标题】：How to preload <options> and <select> with Jquery-option-tree plugin如何使用 Jquery-option-tree 插件预加载 <options> 和 <select>
【发布时间】：2015-07-04 23:45:20
【问题描述】：

我在一个不基于 Wordpress 的独立网站上使用 Jquery-option-tree 插件，如演示页面上的示例 7，除了我没有传递 .txt 文件而是 PHP 页面正在生成传递给插件。

http://kotowicz.net/jquery-option-tree/demo/demo.html

这非常有效：假设用户想要为新产品选择一个类别，该插件适合在用户点击时生成一个漂亮的：“食物 -> 水果 -> 苹果”。（参见演示页 ex. 7）

如果产品已经存在并分配了其类别，该怎么办？我想在用户编辑该产品并预加载树时将其展示给用户。

我有来自数据库的 ids 路径，因此只需使用我传递的值让插件在没有用户交互的情况下运行即可。我看到了这个问题：jQuery simulate click event on select option 并尝试使用这种（和其他）方法模拟用户的点击，但没有成功。

 $('#select')
    .val(value)
    .trigger('click');

这里调用函数：

$(function() {
                var options = {
                        empty_value: '',
                        set_value_on: 'each',
                        indexed: true,  // the data in tree is indexed by values (ids), not by labels
                        on_each_change: '/js/jquery-option-tree/get-subtree.php', // this file will be called with 'id' parameter, JSON data must be returned
                        choose: function(level) {
                            return 'Choose level ' + level;
                        },
                        loading_image: '/js/jquery-option-tree/ajax-load.gif',
                        show_multiple: 10, // if true - will set the size to show all options
                        choose: ''
                    };

                $.getJSON('/js/jquery-option-tree/get-subtree.php', function(tree) { // initialize the tree by loading the file first

                    $('input[name=parent_category_id]').optionTree(tree, options);
                });
            });

在这里你可以看到插件：

https://code.google.com/p/jquery-option-tree/

【问题讨论】：

不是试图找出你所有的问题，而是触发点击选择标签不是正常事件，通常你会触发change。 click 毫无价值，因为它在用户选择过程中多次出现

标签： php jquery select click

【解决方案1】：

我不知道那个插件，但是看看这些例子，似乎有一个适合你的需要； 示例 6 - AJAX 延迟加载和设置每个级别更改的值。

理论上，这只需要一些配置选项：

preselect: {'demo6': ['220','226']}, // array of default values - if on any level option value will be in this list, it will be selected
preselect_only_once: true, // prevent auto selecting whole branch when user maniputales one of branch levels
get_parent_value_if_empty: true,
attr: "id" // we'll use input id instead of name

如果这不符合您的需要，您可以从一个事件启动它，例如 change、keyup 等。

$(document).on('change', '#select', function() {
    $('#nextSelect').val($(this).val());
})

$(document).on('change', '#nextSelect', function() {
    $('#finalInput').val($(this).val());
})

【讨论】：

【解决方案2】：

是的，你是对的麦肯！我看到了“预选”选项，但我最初无法使用它将路径从数据库传输到 javascript，我最终得到了匹配语法的“新手”解决方案：

preselect: {'parent_category_id': [0,'2','22']},

PHP

$category_path 来自数据库查询，类似于 "0,2,76,140,"

    $path = explode(',', $category_path);
    $preselect="";
    foreach ($path as $value) {
        $int = (int)$value;
        if ($int != 0) $preselect.= "'". $int ."',";
        else $preselect.= $int.","; // have to do this as ZERO in my case has to be without apostrophes '' 
    }
    $preselect = "{'parent_category_id':[".$preselect."]}"

 var presel= <?php echo($preselect); ?>;
 var options = {
        preselect: (presel),
 }

对更好的代码有什么建议吗？非常感谢！！

【讨论】：