带搜索的下拉框（select2插件）

时间 2019-11-18

标签搜索下拉 select2 select 插件繁體版

原文原文链接

第一步：下载select2下拉框插件。地址：https://pan.baidu.com/s/1JZUb-e4TXK1IJq1ddpE6Ugjavascript

第二步：将select2下拉框插件复制到项目中css

第三步：在页面引入select2的js与css。java

<!-- 添加select2插件 -->
<link rel="stylesheet" type="text/css" href="<%= basePath%>/select2/select2.min.css"/>
<script type="text/javascript" src="<%= basePath%>/select2/select2.full.min.js"></script>
//下面jquery版本随意便可
<script type="text/javascript" src="<%= basePath%>/lib/jquery/1.9.1/jquery.min.js"></script> 

附赠：
<style>
        /* 下拉框样式 */
        .select1{
            margin: 60px auto 0;
            width: 150px;
            display:inline;
        }
    </style>

第四步：建立下拉框跟初始化select2插件jquery

<body>
<select name="menu1" id="menu1" class="select1" onchange="getMenuByajax()">
	<option  value="">--请选择用户--</option>
	<s:iterator value="sysUserList" id="id">
	<option value="${userId}">${fullname}</option>
	</s:iterator>
</select>
</body>


<script type="text/javascript">
   //页面加载完成后初始化select2控件
    $(function () {
        $("#menu1").select2();
    });
//下拉框
function getMenuByajax(){
    //获取menu1的编号
	menuVal = $('#menu1').val();
	//alert('menuVal='+menuVal)
	$("#belong").attr("value",menuVal);//给隐藏的sysNum字段赋值。
}
</script>