下拉选择框，允许手动输入和过滤

Posted 2020-12-11 qiupiaohujie

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉选择框，允许手动输入和过滤相关的知识，希望对你有一定的参考价值。

https://github.com/zhaobao1830/jquery-editable-select 下载地址

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script type="application/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="Jquery/jquery-2.1.0.min.js"></script>

    <script type="text/javascript" src="Jquery/jquery-editable-select.js"></script>
    <link rel="stylesheet" href="Jquery/jquery-editable-select.css">
</head>
<body>

<span>数据来源</span>
<select class="source" id="depart">
 <option value="0">人工导入1</option>
 <option value="1">人工导入2</option>
 <option value="2">数据服务平台1</option>
 <option value="3">数据服务平台2</option>
 <option value="4">数据服务平台3</option>
 <option value="5">数据服务平台4</option>
 <option value="6">数据服务平台5</option>

    <!--用于存储选择的ID值-->
<input type="text" hidden id="depart_id">
</select>
<input type="button" class="btn btn-default" id="btnc" value="获取数据">


<script type="text/javascript">
    //带输入框的下拉框
//    $("#depart").editableSelect({
//        filter: true,
//        //bg_iframe:true,
//        //effects: ‘fade‘,
//        case_sensitive: false,
//    }).on("select.editable-select", function (e, li) {
//        var dataValue = li.attr("data-value");
//        $("#depart_id").val(li.val());
//    });

    $("#depart").editableSelect({
        filter: true,
        //bg_iframe:true,
        //effects: ‘fade‘,
        case_sensitive: false,
    }).on("select.editable-select", function (e, li) {
       //选择后执行的事件

        console.log(li);
        console.log(li.val());
        $("#depart_id").val(li.val());
    });;

    $("#depart").prop("placeholder", "==请输入或选择==");

    $(‘#btnc‘).on(‘click‘,function () {
       var  tx= $(‘#depart_id‘).val();
       console.log(tx);
       alert(tx);
    });
</script>

</body>
</html>

以上是关于下拉选择框，允许手动输入和过滤的主要内容，如果未能解决你的问题，请参考以下文章

既可以手动输入也可以下拉选择

jsp下拉列框不可编辑，<select></select> ；只能选择下拉框的值，而不能手动去输入值

C# winform datagridview 里的下拉框中既可以从下拉框里选择数据，也可以让客户自己手动往里输入数据，怎

为Jquery EasyUI 组件加上“清除”功能

易组件——核心组件