当前位置: 首页 > 工具软件 > Combo Select > 使用案例 >

Combo-Select下拉搜索

田佐
2023-12-01

引入文件:

<link href="~/Scripts/combo-select/combo.select.css" rel="stylesheet" />
<script src="~/Scripts/combo-select/jquery.combo.select.js"></script>

HTML:

<li class="mt-30">
    <span class="label">指标名称(中文):</span>
    <select name="pollutantcn" id="pollutantcn">
        <option value=""></option>
    </select>
</li>

JS:

        参数说明:

                domId:标签Id,参照HTML

                req:异步方法请求地址

                data:请求参数

function initSelect4(domId, reqUrl, data) {
    $.ajax({
        url: reqUrl,
        type: "POST",
        dataType: "json",
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function (result) {
            if (result.code == 200) {
                var list = result.data;
                var html = "";
                html += '<option value=""></option>';
                $.each(list, function (index, obj) {
                    var num = index + 1;
                    html += '<option value="' + obj.name + '">' + obj.name + '</option>';
                })
                $("#" + domId).html(html);
                $("#" + domId).comboSelect();
            } else {
                console.log("未拉取到数据导致Select框加载失败!")
            }
        },
        error: function (message) {
            console.log("服务器异常导致Select框加载失败!")
        }
    })
}

局部加载重复初始化问题:

        使用下面代码替换“$("#" + domId).comboSelect();”

if (!$("#" + domId).parent().hasClass("combo-select")){
    $("#" + domId).comboSelect();
}

还有一个问题正在研究,多个select局部加载重复初始化问题......(目前还没有找到好的解决方式,所以用select2替换了)

 类似资料: