根据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

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