TomSelect：Ajax响应后设置选中值的正确方法-js教程-PHP中文网

TomSelect：Ajax响应后设置选中值的正确方法

DDD

发布： 2025-09-16 21:32:01

原创

414人浏览过

tomselect：ajax响应后设置选中值的正确方法

本文档旨在指导开发者如何在TomSelect下拉选择器中，通过Ajax请求获取数据后，正确设置选中值。常见的.val().change()方法在TomSelect中可能失效，本文将提供一种有效的解决方案，并附带示例代码，帮助你快速解决类似问题。

问题分析

在使用TomSelect时，直接使用$('#homebasepeg').val(data.hmb_id).change();方法设置选中值通常无法生效。这是因为TomSelect需要通过特定的方法来添加选项并设置选中值。

解决方案

以下是一种通过Ajax获取数据后，正确设置TomSelect选中值的步骤：

获取数据并格式化选项：首先，你需要通过Ajax请求获取数据。然后，将获取的数据转换为TomSelect可识别的选项格式。通常，TomSelect的选项需要包含value和text两个属性。
添加选项到TomSelect：使用addOption()方法将格式化后的选项添加到TomSelect实例中。

法语写作助手
法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情
设置选中值：使用setValue()方法设置TomSelect的选中值。

示例代码

以下是一个完整的示例代码，演示了如何通过Ajax获取数据并设置TomSelect的选中值：

// TomSelect初始化代码
let hmb_peg = new TomSelect("#homebasepeg", {
    copyClassesToDropdown: false,
    dropdownClass: 'dropdown-menu ts-dropdown',
    optionClass:'dropdown-item',
    controlInput: '<input>',
    render:{
        item: function(data,escape) {
            if( data.customProperties ){
            return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
        }
        return '<div>' + escape(data.text) + '</div>';
        },
        option: function(data,escape){
            if( data.customProperties ){
        return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
                    }
        return '<div>' + escape(data.text) + '</div>';
        },
    },
});

// Ajax请求代码
$(document).on('click','#btneditpgw',function(){
    var id = $(this).attr('data-id');
    $.ajax({
        url : "/pegawaidetails/" + id,
        type: "GET",
        dataType: "JSON",
        success: function(data)
        {
            // 格式化选项
            var options_homebase = [data].map(function(item) {
                return { value: item.hmb_id, text: item.hmb_name };
            });

            // 添加选项
            hmb_peg.addOption(options_homebase);

            // 设置选中值
            var selectedValue_hmb = { value: data.hmb_id, text: data.hmb_name };
            hmb_peg.setValue(selectedValue_hmb.value);

            $('#modal-editpegawai').modal('show');
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            console.log(jqXHR);
            alert('Error get data from ajax');
        }
    });
});

登录后复制

代码解释：

options_homebase：将Ajax返回的数据data转换为TomSelect需要的选项格式，包含了value和text属性。
hmb_peg.addOption(options_homebase)：将格式化后的选项添加到TomSelect实例中。
hmb_peg.setValue(selectedValue_hmb.value)：设置TomSelect的选中值，这里使用了data.hmb_id作为选中值。