javascript jQuery Select2 插件：重置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15787331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Select2 plugin: reset
提问by Alban Dericbourg
I'd like to be able to reset (ieempty values and setting placeholder like on a "fresh" one) a Select2dropdown. To be more precise, I have dependant dropdowns and clearing one should clear the depending ones.
我希望能够重置（即空值和设置占位符像一个“新”的）Select2下拉列表。更准确地说，我有相关的下拉列表，清除一个应该清除依赖的下拉列表。
As an example, I could have country, region and city: clearing country should clear region and city.
例如，我可以有国家、地区和城市：清除国家应该清除地区和城市。
I tried several things but never was able to programmatically trigger the clear. The most obvious one was $('#my-select').empty()but the placeholder is not re-set and the selected value remains (even if it is not displayed).
我尝试了几件事，但从未能够以编程方式触发清除。最明显的一个是$('#my-select').empty()但占位符没有重新设置并且所选值仍然存在（即使它没有显示）。
Using $('#my-select').select2('data', {})(or $('#my-select').select2('data', null)) is not yielding the desired result and getting the error:
使用$('#my-select').select2('data', {})(or $('#my-select').select2('data', null)) 不会产生所需的结果并出现错误：
Error: Option 'data' is not allowed for Select2 when attached to a element.
错误：当附加到元素时，Select2 不允许选项“数据”。
Is there an efficient solution for that?
有没有有效的解决方案？
采纳答案by Hernaldo Gonzalez
In Select2 v3.4.1, I removed the Li elements from UL but only the "select2-search-choice" tags:
在 Select2 v3.4.1 中，我从 UL 中删除了 Li 元素，但只删除了“select2-search-choice”标签：
$('.select2-search-choice').remove();
回答by Alban Dericbourg
Well...
好...
It a way, it is working on a minimal example (see below). On this example, the second select does not recover it's placeholder on reset (let's say it is almost working). It means the legacy code I'm working on has an issue somewhere (given the error, I guess the JSP tag generates a <select>).
在某种程度上，它正在处理一个最小的例子（见下文）。在这个例子中，第二个选择不会在重置时恢复它的占位符（假设它几乎可以工作）。这意味着我正在处理的遗留代码在某处有问题（鉴于错误，我猜 JSP 标记会生成一个<select>）。
The issue does not seem to be where I was looking for.
问题似乎不是我要找的地方。
So here is the solution (but not the solution to my real issue).
所以这是解决方案（但不是我真正问题的解决方案）。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select2 example</title>
<link href="select2-release-3.2/select2.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<fieldset>
<legend>Example</legend>
<label for="first-select">First</label>
<input id="first-select" />
<label for="second-select">Second (depends on first)</label>
<input id="second-select" />
</fieldset>
<script src="jquery-1.9.1.min.js"></script>
<script src="select2-release-3.2/select2.js"></script>
<script type="text/javascript">
$(function() {
var secondData = [{id:0,text:'1'},{id:1,text:'2'},{id:2,text:'3'},{id:3,text:'4'}];
$(document).ready(function() {
// Init first dropdown.
$('#first-select').select2({
allowClear: true,
placeholder: 'Select a value',
data: [{id:0,text:'A'},{id:1,text:'B'},{id:2,text:'C'},{id:3,text:'D'},{id:4,text:'E'}]
});
// Init second dropdown.
$('#second-select').select2({
allowClear: true,
placeholder: 'Select a value',
data: {}
});
});
$(document).on('change', '#first-select', function() {
if ($(this).val() == "") {
// Clear second
$('#second-select').select2({
allowClear: true,
placeholder: 'Select a value',
data: {}
});
} else {
// Fill second
$('#second-select').select2({data: secondData});
}
});
});
</script>
</body>
</html>
