码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-17 18:09:06      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:button   rip   java   text   tab   ref   class   lan   doctype   

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>

 

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

标签:button   rip   java   text   tab   ref   class   lan   doctype   

原文地址:https://www.cnblogs.com/qiupiaohujie/p/13153853.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!