selectpicker -- 一款好用的select插件

最新推荐文章于 2024-04-22 09:48:26 发布

dengcuol09165

最新推荐文章于 2024-04-22 09:48:26 发布

阅读量414

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/knightdreams6/p/10974708.html

版权

selectpicker依赖bootstrap，bootstrap依赖jquery

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap-select/1.13.10/css/bootstrap-select.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-select/1.13.10/js/i18n/defaults-zh_CN.min.js"></script>
        
    </head>
    <body>
        <form>
　　　　　　　　// data-max-options="1"  最大能选择一个
            <select class="selectpicker" data-live-search="true" data-max-options="1" data-style="btn-primary" id="guide_city">
            </select>
            <button type="button" class="btn btn-primary" id="guide_submit">提交</button>
        </form>
      
    </body>
    <script type="text/javascript">
        let guideJsonArray = [{"city_id":"10065","city_name":"北京"},{"city_id":"10099","city_name":"上海"},{"city_id":"10208","city_name":"重庆"}]
        let htmlStr = "";
        for(let i in guideJsonArray){
            htmlStr += '<option value="'+ guideJsonArray[i].city_id +'">'+ guideJsonArray[i].city_name +'</option>'
        }
　　　　 // 给selectpicker赋值
        $("#guide_city").html(htmlStr);
        $('#guide_city').selectpicker('refresh');//动态刷新

        $("#guide_submit").click(function(){
            console.log($("#guide_city").val());　　　　　　　　　　　　　　// 获取选中的option的值　　
　　　　　　　console.log($("#guidecity").find("option:selected").text(); // 获取选中的option的text
        });
    </script>
</html>

转载于:https://www.cnblogs.com/knightdreams6/p/10974708.html

dengcuol09165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
selectpicker -- 一款好用的select插件

selectpicker依赖bootstrap，bootstrap依赖jquery<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con...
复制链接

扫一扫