Filter select options based on data-* attribute

Question

I have 2 select menus on my page.

First have 3 values: All, Active, Unactive and second is filled with data that comes from server.

I need to connect them, so that when I select an option from the first select menu, the second select will have only certain options (filter second select menu)

My idea was to get data from server with 3 elements:

[ { "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 } ]

Second thing that I do is adding all options with custom attribute to that select:

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

I have problem with filtering second select.

I've wrapped filling second select inside a plugin so it will be easier to reuse it.

Here is jsFiddle demo: http://jsfiddle.net/Misiu/pr8e9/4/

What I would like this to work is after filling select from server user will be able to select every option from second select, but when he will change first select the second one will update-show only appropriate options.
So if he'll select Active he will be able to select only Active One or Active Two.

EDIT: This is working solution thanks to @oe.elvik

Answer 1

Alternative solution:

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