<div class="form-group">
<select class="form-control js-example-basic-multiple"
name="regular[]" id="regular" multiple="multiple" required>
<option value="History">History</option>
<option value="Political Science">Political Science
</option>
<option value="Economics">Economics</option>
<option value="Education">Education</option>
<option value="Philosophy">Philosophy</option>
<option value="Elective Assamese">Elective Assamese
</option>
<option value="Elective Hindi">Elective Hindi</option>
<option value="Arabic">Arabic</option>
<option value="Mathematics">Mathematics</option>
<option value="Linguistics">Linguistics</option>
</select>
</div>
这是我的select2输入。
$(document).ready(function () {
$('#regular').select2({
placeholder: 'Select any two from the options',
maximumSelectionLength: 2,
});
});
我已经在这里加载了select2.js。并且我正在从ajax调用中获取数据。
options = data.regular.split(",");
此option
具有3个值,我想从数组中选择前两个。
因此,我的代码是..
option = [options[0],options[1]];
$("#regular").val(option).trigger('change');
现在,选项显示在列表中。但是,如果单击并从输入中进行选择,则所有设置都会重置,并且我必须再次选择。如果我不更改任何要提交的内容,则该字段显示为必填。
答案 0 :(得分:1)
此处的代码有效,因为来自服务器的值与Option元素的两个值相同
所以也许您的问题是选项字符串不存在
,它也是区分大小写的,所以“阿拉伯语”!==“阿拉伯语”阿拉伯语将不起作用
更改选项标签或更改JSON响应中的值字符串
希望对您有帮助
$(document).ready(function() {
mySelect = $('#regular').select2({
placeholder: 'Select any two from the options',
maximumSelectionLength: 2
});
options = 'Economics,Arabic,Education'.split(',');
option = [options[0],options[1]];
//simulate ajax using timeout
setTimeout(function() {
mySelect.val(option).trigger("change");
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<div class="form-group">
<select class="form-control js-example-basic-multiple" name="regular[]" id="regular" multiple="multiple" required>
<option value="History">History</option>
<option value="Political Science">Political Science
</option>
<option value="Economics">Economics</option>
<option value="Education">Education</option>
<option value="Philosophy">Philosophy</option>
<option value="Elective Assamese">Elective Assamese
</option>
<option value="Elective Hindi">Elective Hindi</option>
<option value="Arabic">Arabic</option>
<option value="Mathematics">Mathematics</option>
<option value="Linguistics">Linguistics</option>
</select>
</div>