如何在 jquery selectize 插件中从数据库设置 select 值

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 是 jQuery 上 GitHub 上提供的插件，

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

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

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

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});

我相信通过改变这些东西会得到你想要做的。

如何在 jquery selectize 插件中从数据库设置 select 值

how to set select value from database in jquery selectize plugin

jquery

html

spring-boot

drop-down-menu

selectize.js