根据数据属性筛选选项

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。

编辑：This正在努力解决由于@ 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 
    }); 
});