Question

在下面，我可以使用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>

Answer 1

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

当前无法动态执行此操作（更改选项）。要做的一般想法是：


实例被破坏

使用修改后的选项重新初始化实例

尽管有许多方法可以做到这一点，但我觉得这是一种动态更改选项的强大版本：

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

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

用于初始化select2的函数，它将在选项更改时被多次调用。
```
function initSelect() {
   $('#choose').select2(options);
}
```
例如，让我们更新占位符-简单地更改选项的键并调用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的特定方法。希望这可以帮助。

如何重置select2中的allowClear选项？

1 个答案: