Select2动态数据设置

Posted 2023-05-07

【中文标题】Select2动态数据设置

【英文标题】：Select2 dynamic data setting

【发布时间】：2013-02-04 04:00:58

【问题描述】：

我正在尝试将 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 显示控件消失的原因。我对此实施仍有疑问：

如何让#master没有有初始选择？ 如何更改#detail 中的占位符文本，使其 回应主人已被选择的事实？

【参考方案1】：

第二个选择#detail 将不再起作用，您只能单击选项，但如果您尝试输入几个字符，您会看到发生了什么。

【参考方案2】：

也许是这样的：

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

在 chrome+win32 上测试