我有一个模态,它有两个"行为",一个用于创建新记录,另一个用于编辑现有记录,具体取决于单击了哪个按钮(新建/编辑(。
单击编辑时,记录数据(用户表(将与子记录(权限表(一起加载。
在模式加载期间,select2被初始化:
let $select2user = $(".select2user");
$select2user.select2({
ajax: {
url: 'getUsersWithPermissions.php',
type: "GET",
dataType: 'json',
data: function (params) {
return {
search: params.term,
page: params.page || 1
};
},
processResults: function (data) {
data.page = data.page || 1;
return {
results: data.items.map(function (item) {
return {
id: item.id,
text: item.name
};
})
}
},
cache: true,
delay: 250
},
multiple: true
});
一切都很好,除了当我点击编辑记录时。
输入表单(模态(是用注册数据正确填写的,但是,我不能从子记录(权限表(中预先选择多个选项。
我尝试使用"append",但它最终生成了重复的选项。
$.each( value, function( permissions, permission ) {
console.log(permission['name']); // ok
let newOption = new Option(permission['name'], permission['id'], false, true);
$select2user.append(newOption);
});
$select2user.trigger('change');
$(document).ready(function() {
$("#selectlist").select2();
var _selectedValues = [];
_selectedValues.push('1');
_selectedValues.push('5');
_selectedValues.push('8');
$("#selectlist").select2().val(_selectedValues).trigger("change");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<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/4.0.5/js/select2.min.js"></script>
<select id="selectlist" class="form-control" name="selectList[]" multiple="multiple" style="width:200px">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
您可以这样尝试,在select2中设置值。
var _selectedValues = [];
_selectedValues.push('1');
_selectedValues.push('2');
_selectedValues.push('3');
$("#selectlist").select2().val(_selectedValues).trigger("change");