帶搜索的下拉框（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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。