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

Question

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

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

这非常有效：假设用户想要 select 新产品的类别，该插件适合在用户点击时生成漂亮的：“食物 -> 水果 -> 苹果”的目的. （参见示例 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/

Answer 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());
})

Answer 2

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

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."]}"

JS

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

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

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

How to preload <options> and <select> with Jquery-option-tree plugin

php

jquery

select

click