jquery - 如何在jquery selectize插件中设置从数据库中选择值

Question

我是 jQuery selectize 新手，在将值设置为 <select> 时遇到问题编辑表单期间从数据库中获取。 <option>在 HTML 中硬编码。

HTML:

<select class="form-control" name="agentType" id="agentType">
    <option value="">--Select Agent Type--</option>
    <option value="Individual">Individual</option>
    <option value="Partner">Partner</option>
</select>

假设这两个值保存在数据库中，即(个人和合作伙伴)。

当我点击编辑时，我希望预先选择一种代理类型，并在下拉列表中选择与数据库中保存的值相对应的另一种。图片如下所示:

Jquery:

$('#agentDataTable tbody').on( 'click', '.dataEdit', function () {
    var data = agentDataTable.row( $(this).parents('tr') ).data();

    $('#agentForm #agentName').val(data.agentName);
    var $select = $('#agentForm #agentType').selectize();
    var control = $select[0].selectize;
    control.clear();
    control.clearOptions();
    control.addOption({text: data.agentType});
    control.setValue(data.areaPincodeId, true);
    });

但下拉列表中根本没有显示任何内容。

我尝试了许多其他引用资料，但没有答案符合我的查询，因为每个人都有自己的方式。

Answer 1

selectize 据我所知是 GitHub 上提供的 jQuery 插件，

在您的问题中，您没有显示使 select 字段选择的方法，通过查看您的查询，我的猜测是您没有正确编写该方法并且您错过了数据表方法中的id: data.agentType。

我为您提供了一种方法来选择select字段和数据表的查询来获取它。

替换 jquery 文件中的以下方法以进行 selectize。

function setAgentTypeSelect() {
    var $agentTypeSelect = $('#agentForm #agentType').selectize({
        selectOnTab: true,
        closeAfterSelect: true,
        persist: true,
        valueField: 'id',
        labelField: 'text',
        options: [],
        preload: true,
        create: false
    }); 
}

在您的数据表方法中，只需替换您的 addOptions control.addOption({id: data.agentType, text: data.agentType});

我确信通过改变这些事情将会得到你想要做的事情。