Select2动态数据设置

Question

我想使用select2与jQuery 1.9.1和select2 3.3.0来实现我所想象的是一个相当基本的用例...我想用基于状态的选项来填充select2控件另一个select2控件。

我有以下几点：

<div> 
    <select id="master" name="master"> 
    <option value=1>a</option> 
    <option value=2>b</option> 
    </select> 
</div> 
<div> 
    <input type="hidden" id="detail" name="detail" data-placeholder="No options until master chosen"> 
    </select> 

<script src="jquery-1.9.1.js"></script> 
<script src="select2-3.3.0/select2.js"></script> 
<script> 
var a = []; 
var b = []; 
for (var i = 0; i < 20; i++) { 
    a.push({id: i, text: "a" + i}); 
    b.push({id: i, text: "b"+ i}); 
} 

$(document).ready(function() { 
    $("#master").select2().on('change', function() { 
    console.log("master changed: " + $("#master").val()) 
    var right_one = a; 
    if($("#master").val() == 2) right_one = b; 
    $("#detail").removeClass('select2-offscreen').select2({data:right_one}) 
    console.log("right_one: " + right_one) 
    }) 


}) 

编辑： This answer说明了为什么控制正在消失。我有疑问剩余对此实施：

1. 我怎样才能让#MASTER有不最初的选择？
2. 如何更改#detail中的占位符文本，以便 能够响应已选择主控的事实？

Answer 1

Mabye是这样的：

<script> 
var a = []; 
var b = []; 
for (var i = 0; i < 20; i++) { 
    a.push({id: i, text: "a" + i}); 
    b.push({id: i, text: "b"+ i}); 
} 

$(document).ready(function() { 
    //set up default data, should work without one too 
    $('#detail').data('select2_values', []); 
    $('#detail').select2({ 
     allowClear: true, 
     width: '150px', 
     placeholder: 'No options until master chosen', 
     query: function (query) { 
      var data = {results: []}; 
      if (query.term == '') 
      { 
       data.results = $('#detail').data('select2_values'); 
      } 
      query.callback(data); 
     }, 
     initSelection : function (element, callback) { 
      var data = $(element).data('select2_values'); 
      if (typeof(data)!='object') data = []; 
      callback(data); 
     }, 
     data: $(this).data('select2_values') 
    }).select2('disable'); 
    $('#master').select2({ 
     allowClear: true, 
     width: '150px' 
    }).on("change", function(e) { 
     var right_one = a; 
     if ($('#master').select2('val') == 2) right_one = b; 
     $("#detail").data('select2_values', right_one); 

     //Remove previous value if any 
      $("#detail").select2('val',''); 

     //If you want to select some vaoue you can use next line 
     //$("#detail").select2('data', right_one[0]); 

     //Enable 2nd box 
     $("#detail").select2('enable'); 
    }); 
}); 

</script> 

在测试了镀铬+ win32的

Answer 2

第二选择#detail就不管用了，只能点击选项，但如果你试着键入几个字符，你会看到发生了什么。