使用BootStrap实现带模糊搜索的select下拉联动列表-风影OvO博客

写项目的时候经常会用到这种, 索性就搞个Demo记录一下, 以后拿来直接用.

先上效果图:

此处需要引用到bootstrap全家桶:
bootstrap-select.min.css , bootstrap.min.css , bootstrap.min.js , bootstrap-select.min.js , jquery.min.js

不啰嗦了直接上代码吧!

<!DOCTYPE html>
<html>
<head>
    <title>jQuery bootstrap-select可搜索多选下拉联动列表 - By:风影OvO</title>
    <!-- 下拉搜索框 -->
    <link href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>
    <!-- 下拉搜索框end -->
    <!-- 初始化 -->
    <script type="text/javascript">
    $(window).on('load', function () {
            // 中文重写select 查询为空提示信息
            $('.selectpicker').selectpicker({
                noneSelectedText: '',
                noneResultsText: '',
                liveSearch: true,
                size:5   //设置select高度，同时显示5个值
            });
        });
    </script>
</head>
<body>
    <div style="width: 100%;height: 200px;"></div>
    <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="number_plate">下拉搜索选择框 <span class="text-danger">*</span>
                </label>
                <div class="col-lg-6">
                    <select id="myselect" name="myselect" class="selectpicker input-xlarge" data-live-search="true">
                        <option>----请选择----</option>
                        <option value="1">张三</option>
                        <option value="2">李四</option>
                        <option value="3">王二麻子</option>
                        <option value="4">小豆粒</option>
                        <option value="5">宋无缺</option>
                        <option value="6">老干妈</option>
                        <option value="7">豆瓣酱</option>
                        <option value="8">卫龙辣条</option>
                        <option value="http://www.fyovo.com">风影OvO博客</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="mytxt">联动文本框 <span class="text-danger">*</span>
                </label>
                <div class="col-lg-6">
                    <input type="text" class="form-control" id="mytxt" name="mytxt" placeholder="联动文本" required>
                </div>
            </div>
        <form>
    </div>
</body>
<script type="text/javascript">
    $('#myselect').change(function(){
        var id = $(this).val();
        var mytxt = '风影OvO博客 - http://www.fyovo.com - ' + id;
        $('#mytxt').val(mytxt);//联动文本框文本
        //$.get("/test/"+id, {}, function(res){
            //此处可以Ajax获取数据
            //$('#mytxt').val(res.mytxt);//联动文本框文本
        //});
    });
</script>
</html>

-End-