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

我在演示頁面上使用的不是基於Wordpress的獨立網站上的Jquery-option-tree插件，除了我沒有通過一個。 txt文件，但是PHP頁面正在生成要傳遞給插件的數組<選項>。如何使用Jquery-option-tree插件預加載<options>和<select>

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/

來源

2015-04-26 Dave

沒有試圖找出你所有的問題，但觸發點擊一個選擇標籤是不正常的事件，通常你會觸發'變化'。 'click'是毫無價值的，因爲它在用戶選擇過程中多次出現 – charlietfl

我不知道該插件，但是看一下例子似乎有一個符合你需要的東西; 示例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

如果這個不適合你需要的，雖然，你可以從事件開始吧，就像變化，KEYUP，等等

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

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

來源

2015-04-26 16:46:32 Mackan

是的，你是對的麥坎！我看到了「預選」的選擇，但我最初無法使用它從數據庫轉移到JavaScript的路徑，我結束了我的「菜鳥」的解決方案，以符合語法：

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

PHP

$ category_path來自DB查詢，猶如「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), 
}

任何建議更好的代碼？非常感謝！

來源

2015-04-26 20:24:45 Dave

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

回答

相關問題