时间戳

首页 > 解决方案 > 如何重置 select2 中的 allowClear 选项？

jquery-select2 - 如何重置 select2 中的 allowClear 选项？

问题描述

在下文中，我可以使用 opts 和 setPlaceholder 更新 select2 占位符文本。有什么方法可以更新“allowClear”选项吗？我找不到任何可以调用的 select2 方法。有任何想法吗？

var data=[{id:0,tag:'foo'},{id:1,tag:'bar'}];

function format(item) { return item.tag };

function update() {
    //$('#choose').select2("destroy");
    $('#choose').data('select2').opts.placeholder='test';

    $('#choose').data('select2').setPlaceholder();
};


$(document).ready(function () {
    $('#choose').select2({
        width: '100px',
        allowClear: true,
        placeholder: 'yooyoo'});
    
    $("#button").click(function () {
        update();
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>
<script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<select id="choose">
            <option></option><!-- Needed to show X image to clear the select -->
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
<button id="button">Click</button>

标签： jquery-select2

解决方案

allowClear是 select2 配置的一部分，不能动态更改，如此处所述：

目前无法动态执行此操作（更改选项）。需要做什么的总体思路是：

  1. 实例被销毁
  2. 使用修改后的选项重新初始化实例

尽管有很多方法可以做到这一点，但我认为这是一个动态更改选项的强大版本：

  1. 预先将选项设置为对象（包含默认值）：

    var options = {
  width: '100px',
  allowClear: true,
  placeholder: 'yooyoo'
};

  2. 初始化 select2 的函数，该函数将被多次调用，即在选项更改时。

    function initSelect() {
   $('#choose').select2(options);
}

  3. 例如，让我们更新占位符 - 简单地更改选项的键并调用initSelect.

    function update() {
   options.placeholder = 'test';
   initSelect();
};

以类似的方式，allowClear也可以修改该选项。这是一个代码片段：

var data=[{id:0,tag:'foo'},{id:1,tag:'bar'}];

function format(item) { return item.tag };

var options = {
  width: '100px',
  allowClear: true,
  placeholder: 'yooyoo'
};

function update() {
    options.placeholder = 'test';
    initSelect();
}

function toggleClear() {
	options.allowClear = !options.allowClear;
  initSelect();
}
function initSelect() {
    $('#choose').select2(options);
}

$(document).ready(function () {
		initSelect();
    $("#button").click(function () {
        update();
    });
  	$("#toggleClear").click(function () {
        toggleClear();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>
<script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<select id="choose">
            <option></option><!-- Needed to show X image to clear the select -->
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
<button id="button">Click</button>

<button id="toggleClear">Toggle Clear Option</button>

也没有特定的方法来重置allowClear占位符 ( setPlaceHolder)。希望这可以帮助。

推荐阅读