jQuery的下拉框搜索select2插件用法

最新推荐文章于 2024-01-25 00:44:52 发布

自古红蓝出CP

最新推荐文章于 2024-01-25 00:44:52 发布

阅读量978

点赞数

分类专栏： jsp 文章标签： jsp

本文链接：https://blog.csdn.net/Blue_Red_1314/article/details/78751086

版权

jsp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：
这里写图片描述

需要：select2.js、select2.css、jquery.js 注：jquery需要1.8.3版本以上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'select2.jsp' starting page</title>
    <link rel="stylesheet" href="/select2-4.0.3/dist/css/select2.min.css" type="text/css" />  
    <script type="text/javascript" src="/scripts/jquery/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="/select2-4.0.3/dist/js/select2.min.js"></script> 

    <script type="text/javascript">
    $(document).ready(function() {
      $(".select_gallery").select2();  
      $("#status").select2();  
    }); 
</script>  
    </script>
  </head>

  <body>
     <label class="control-label col-sm-1">个性标签（radio）: </label>  
    <div class="col-sm-3">  
        <select class="select_gallery" style="width:100%;">  
            <optgroup label="这样真的好么？">  
                <option value="0">打野</option>  
                <option value="01">上单</option>  
                <option value="02">中单</option>  
                <option value="03">送人头</option>  
            </optgroup>  
            <optgroup label="职位">  
                <option value="1">土豪</option>  
                <option value="2">屌丝</option>  
                <option value="3">单身dog</option>  
                <option value="4">苹果粉</option>  
                <option value="5">苦逼程序员</option>  
            </optgroup>  
        </select>  
    </div> 


    <select name="product.status" id="status" style="width: 140px;">
        <option value="">--请选择--</option>
            <option <c:if test="${product.status == 0 }">selected="selected"</c:if> value="0">11</option>
            <option <c:if test="${product.status == 1 }">selected="selected"</c:if> value="1">22</option>
    </select>
  </body>
</html>