jQuery Select2 3.5.2 在动态创建的下拉列表中设置值
jQuery Select2 3.5.2 set value in dynamically created dropdown
我正在使用旧版本的 select2 - 要将数组绑定到 select ,我需要使用 <input type="text">
。是否可以将 select 的值设置为某个动作的特定值,比如单击。我在 stack overflow 中遇到了很多问题,但在 <input type="text">
的情况下似乎没有解决方案。
这是我的代码
var value = [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}, {
id: 3,
text: 'invalid'
}, {
id: 4,
text: 'wontfix'
}]
$(document).ready(function() {
$(".lang").select2({
data: value
})
});
$("#btn").click(function() {
$(".lang").select2('val', 'bug');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
<input class="lang" type="text" style="width:100px">
<input class="lang" type="text" style="width:100px">
<input class="lang" type="text" style="width:100px">
<button id="btn">Click Here</button>
更新的答案支持同时更改多个 select (class) 并使用数据(id 和文本)对象而不是值 (id)
- 为什么要调用两次 select2() ?
- 如果你想select一些东西,你需要传递值作为参数,而不是描述
快速解决方案:$("#lang").select2('val', 1);
var value = [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}, {
id: 3,
text: 'invalid'
}, {
id: 4,
text: 'wontfix'
}]
$(document).ready(function() {
$(".lang").select2({
data: value
})
});
$("#btn").click(function() {
$(".lang").select2('val', 1);
});
$("#btn-2").click(function() {
$(".lang").select2('data', {id: 0, text: 'enhancement'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
<input id="lang_1" type="text" class="lang" style="width:100px"><br />
<input id="lang_2" type="text" class="lang" style="width:100px"><br />
<input id="lang_3" type="text" class="lang" style="width:100px"><br />
<button id="btn">Set all to value 1</button><br />
<button id="btn-2">Set all to data (id & text object)</button>
我正在使用旧版本的 select2 - 要将数组绑定到 select ,我需要使用 <input type="text">
。是否可以将 select 的值设置为某个动作的特定值,比如单击。我在 stack overflow 中遇到了很多问题,但在 <input type="text">
的情况下似乎没有解决方案。
这是我的代码
var value = [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}, {
id: 3,
text: 'invalid'
}, {
id: 4,
text: 'wontfix'
}]
$(document).ready(function() {
$(".lang").select2({
data: value
})
});
$("#btn").click(function() {
$(".lang").select2('val', 'bug');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
<input class="lang" type="text" style="width:100px">
<input class="lang" type="text" style="width:100px">
<input class="lang" type="text" style="width:100px">
<button id="btn">Click Here</button>
更新的答案支持同时更改多个 select (class) 并使用数据(id 和文本)对象而不是值 (id)
- 为什么要调用两次 select2() ?
- 如果你想select一些东西,你需要传递值作为参数,而不是描述
快速解决方案:$("#lang").select2('val', 1);
var value = [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}, {
id: 3,
text: 'invalid'
}, {
id: 4,
text: 'wontfix'
}]
$(document).ready(function() {
$(".lang").select2({
data: value
})
});
$("#btn").click(function() {
$(".lang").select2('val', 1);
});
$("#btn-2").click(function() {
$(".lang").select2('data', {id: 0, text: 'enhancement'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
<input id="lang_1" type="text" class="lang" style="width:100px"><br />
<input id="lang_2" type="text" class="lang" style="width:100px"><br />
<input id="lang_3" type="text" class="lang" style="width:100px"><br />
<button id="btn">Set all to value 1</button><br />
<button id="btn-2">Set all to data (id & text object)</button>