Bootstrap 在渲染后更改tom选择的值

b4wnujal  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(2)|浏览(146)

我正在开发一个使用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**.
d6kp6zgx

d6kp6zgx1#

为什么不使用所选值初始化TomSelect?

new TomSelect(input,{
    create: true,
    plugins: ['change_listener'],
    sortField: {
        field: "text",
        direction: "asc"
    },
    options:authors,
    items:[response.data.book.author_id]
})
ajsxfq5m

ajsxfq5m2#

而不是这样做:

$('#select-beast-update').val(response.data.book.author_id).change()

您可以将初始化的TomSelect设置为一个变量,例如:

let tomSelect = new TomSelect("#select-beast-update",{
                    create: true,
                    plugins: ['change_listener'],
                    sortField: {
                        field: "text",
                        direction: "asc"
                    },
                    options:authors,
                });

然后:

tomSelect.setValue(response.data.book.author_id);

相关问题