Javascript 根据数据-*属性筛选选择选项

我的页面上有两个选择菜单

第一个有3个值：

All、Active、Unactive

，第二个值填充来自服务器的数据

我需要连接它们，这样当我从第一个

选择

菜单中选择一个选项时，第二个

选择

将只有特定的选项（过滤第二个选择菜单）

我的想法是使用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>

“+n[索引]。名称+”

我在筛选第二个选择时遇到问题

我将填充second select封装在插件中，这样更容易重用它

以下是JSFIDLE演示：

我希望这样做的目的是，在填写“从服务器选择”后，用户将能够从“第二选择”中选择每个选项，但当他更改“第一选择”时，第二选择将更新，仅显示适当的选项。
因此，如果他选择

Active

，他将只能选择

Active One

或

Active Two

编辑：由于@oe.elvik而成为有效的解决方案

替代解决方案：

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

（函数（$）{
var Meinanda；
$.fn.createOptions=函数（过滤器）{
var$this=这个；
var n=Meinanda
var list=“”；
对于（var指数=0；指数

@oe elvik-感谢您这么快的回复。我自己设法解决了这个问题，但它没有您的解决方案干净。顺便说一句，我的工作代码是：我对您的代码进行了一些调整，添加了组，而不是活动/非活动选项：