我正在开发一个使用tom-select(https://tom-select.js.org/)的更新函数。
过程如下:1-用户点击编辑按钮2-引导模式将打开,并且所选行的数据将显示,以便他可以更新它们。
问题:渲染选择器后,我想改变它的值来选择所选项目的值,我尝试了以下代码:$('#select-beast-update').val(response.data.book.author_id).change()
但是它不工作,然后我尝试使用onInitialize:function()-在回调部分参考这个链接以获得更多细节https://tom-select.js.org/docs/-它也不工作。
这是我的 AJAX 函数:
$.ajax({
url: "{{ route('books.edit',['%book%']) }}".replace('%book%',id),
type: "GET",
success: (response)=>{
$('#book-id-update').val(response.data.book.id)
$('#book-name-update').val(response.data.book.name)
// $('#book-pdf-update').val(response.data.book.pdf_file)
// $('#book-mobi-update').val(response.data.book.mobi_file)
let authors = response.data.authors.map(item => {
return {
value: item.id,
text: item.name
};
});
var input = document.getElementById('select-beast-update');
new TomSelect(input,{
create: true,
plugins: ['change_listener'],
sortField: {
field: "text",
direction: "asc"
},
options:authors,
})
input.value = response.data.book.author_id;
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
input.dispatchEvent(evt);
$('#select-beast-update').attr('name','author_id')
},
error: (e)=>{
Swal.fire('Error','Please Try Again Later','error' )
}
}).done(function(){
$('#edit_book_modal').modal('show')
}); ```
note: I'm using Laravel as my backend and vanilla JS and bootstrap along with the tom-select. I'm also open to changing tom-select and using other libraries that implement search in its options **other than select 2**.
2条答案
按热度按时间d6kp6zgx1#
为什么不使用所选值初始化TomSelect?
ajsxfq5m2#
而不是这样做:
您可以将初始化的TomSelect设置为一个变量,例如:
然后: