根据 data-* 属性过滤选择选项

Question

我的页面上有 2 个选择菜单。

第一个有 3 个值：All, Active, Unactive，第二个是来自服务器的数据。

我需要连接它们，这样当我从第一个select 菜单中选择一个选项时，第二个select 将只有某些选项（过滤第二个选择菜单）

我的想法是使用 3 个元素从服务器获取数据：

[ { "Id": 1, "Name": "Active One",   "Active":true },
  { "Id": 2, "Name": "Active Two",   "Active":true },
  { "Id": 3, "Name": "Unactive One", "Active":false },
  { "Id": 4, "Name": "Unactive Two", "Active":false } ]

我要做的第二件事是将所有具有自定义属性的选项添加到该选择：

<option value=' + n[index].Id + ' data-active='+n[index].Active+'>' + n[index].Name + '</option>

我在过滤第二个选择时遇到问题。

我已经将填充第二个选择包装在一个插件中，这样会更容易重复使用。

这里是 jsFiddle 演示：http://jsfiddle.net/Misiu/pr8e9/4/

我希望这个工作是在从服务器用户填充选择后，将能够从第二个选择中选择每个选项，但是当他更改第一个选择时，第二个将更新 - 仅显示适当的选项。
因此，如果他选择Active，他将只能选择Active One 或Active Two。

编辑： 感谢@oe.elvik，This 是有效的解决方案

Answer 1

替代解决方案：

(function ($) {
    var meinData;
    $.fn.createOptions = function(filter) {
        var $this = this;
        var n = meinData
        var list = "";

        for (var index = 0; index < n.length; index++) {
            if(filter == -1 || (filter == 1 &&  n[index].Active) || (filter == 0 && !n[index].Active)){
                list += '<option value=' + n[index].Id + ' data-active='+n[index].Active+'>' + n[index].Name + '</option>';
            }
        }

        $this.filter("select").each(function () {
            $(this).empty();
            $(this).append(list);
            if ($.ui.selectmenu && defaults.selectmenu) {
                $this.selectmenu();
            }
        });
    }

    $.fn.ajaxSelect = function (options) {
        var $this = this;
        //options
        var settings = $.extend({}, defaults, options);
        //disable select
        if ($.ui.selectmenu && settings.selectmenu && settings.disableOnLoad) {
            $this.selectmenu('disable');
        }


        //ajax call
        $.ajax({
            type: settings.type,
            contentType: settings.contentType,
            url: settings.url,
            dataType: settings.dataType,
            data: settings.data
        }).done(function (data) {
            meinData = data.d || data;
            $($this).createOptions(-1)
            settings.success.call(this);
        }).fail(function () {
            settings.error.call(this);
        });

        return this;
    };

    var defaults = {
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: '/echo/json/',
        dataType: 'json',
        data: null,
        async: true,
        selectmenu: true,
        disableOnLoad: true,
        success: function () {},
        error: function () {}
    };
})(jQuery);


$(function () {
    var data = {
        json: $.toJSON({
            d: [{ "Id": 1, "Name": "Active One", "Active":true }, { "Id": 2, "Name": "Active Two", "Active":true },{ "Id": 3, "Name": "Unactive One", "Active":false }, { "Id": 4, "Name": "Unactive Two", "Active":false }]
        }),
        delay: 2//simulate loading
    };

    function ok() {
        $('select#me').selectmenu({ select: function(event, options) {
            $('select#mein').createOptions(options.value)
            }
        });
    }

    function error() {
        alert('there was a problem :(');
    }
    $('select#me').selectmenu().selectmenu('disable');
    $('select#mein').selectmenu().ajaxSelect({
        data: data,
        success: ok,
        error: error
    });
});