Question

我一直在使用jquery ui在仪表板上工作，并且遇到了ui.selectmenu.js，用于将枯燥的html选择菜单转换为jquery ui look'n'感觉选择菜单，但是我遇到了一些问题不加载我的选择列表内容。

我已经使用预先填充的选项列表测试了实现，这些选项显示在ui.selectmenu中。但是，当我试图动态填充选项列表时，列表框出现问题 - 它是空的！

        $(document).ready(function(){
            jQuery(function($){
            $.getJSON('src/versions.php', function(data) {
                $.each(data, function(key, val){
                        $('<option/>').attr('value', val.version)
                        .html(val.version)
                        .appendTo('select#release_id');
                    });
                });
            });

        $('select#release_id').selectmenu({
            style:'dropdown',
            width: 250,
            maxHeight: 500
        });

上面的代码返回一个json值列表，并将它们正确地附加到选项列表中。在查看html代码时，可以从firebug中观察到这一点。当我将此代码与预先列出的列表（再次使用ui.selectmenu）进行比较时，似乎存在细微差别 - ui.selectmenu正在更新值select的元素;使用上面的代码时不会发生这种情况。

总的来说，我认为这是一个时间问题，我只是不确定如何验证或阻止代码以错误的顺序加载。

任何指导都将不胜感激。

谢谢！

Answer 1

添加/删除/修改选项

根据这些文档：Github jQuery UI Select Menu，可以通过添加/删除/修改原始选择中的选项，然后再次调用$('#select').selectmenu();来修改一个用户选择菜单中的选项。

可以重命名选项或甚至在selectmenu中添加一个。只是更改原始选择元素和将selectmenu()应用于它： $('select').selectmenu();

实施例

$(document).ready(function(){

    var select_menu = 'select#release_id';

    var init_select = function(selector) {
        $(select_menu).selectmenu({
            style:'dropdown',
            width: 250 ,
            maxHeight: 500
        });
    };

    jQuery(function($){
        $.getJSON('src/versions.php', function(data) {

            // Don't want to init_select more than once per AJAX request
            var count = data.length;
            $.each(data, function(key, val){
                $('<option/>').attr('value', val.version)
                    .html(val.version)
                    .appendTo(select_menu);
                });

                // Second initialization, using extra options AJAX'd in
                if (--count == 0) init_select(select_menu);
            });
        });

        // First initialization, using whatever options present at page-load
        init_select(select_menu);
});

jQuery ui.selectmenu没有被填充

1 个答案:

添加/删除/修改选项

实施例