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

Question

I am using Jquery-option-tree plugin on a standalone website not based on Wordpress as in example 7 on the demo page, except that I am not passing a .txt file but a PHP page is generating the array of < options > to be passed to the plugin.

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

This perfectly works: so let's say that the user wants to select a category for a new product, the plugin suits the purpose generating a nice: " Food -> fruit -> apples " upon user clicks. (see demo page ex. 7)

What instead if a product already exists with its categories assigned? I want to show it to the user when he edit that product, preloading the tree.

I have the ids path coming from database, so it would just be a matter of having the plugin to run without the user interact, using the value I pass. I saw this question: jQuery simulate click event on select option and tried to simulate user' click with this (and other) methods with no luck.

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

Here the call to the function:

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

Here you can see the plugin:

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

Answer 1

I don't know that plugin, but looking at the examples there seems to be one that fits your need; Example 6 - AJAX lazy loading & setting value on each level change.

This would, in theory, just require some config options:

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

If this doesn't fit you need though, you could initiate it from an event, like change, keyup, etc.

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

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