jQuery输入框下拉选择菜单
1、新建html文档。
2、书写hmtl代码。
3、书写css代码。div.sp_result_area div.sp_pagination li { t髫潋啜缅ext-align: center; display: inline; box-sizing: border-box; }div.sp_result_area div.sp_pagination>ul>li>a { margin: 0; /* border: 1px solid #ddd; */border-radius: 0; padding: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background-color: white; float: left; text-decoration: none; border: 0; box-sizing: content-box; color: #666666; font-size: 20px; height: 26px; line-height: 26px; -webkit-transition: all .5s cubic-bezier(.175, .885, .32, 1); transition: all .5s cubic-bezier(.175, .885, .32, 1); }div.sp_result_area div.sp_pagination li.csFirstPage a, div.sp_result_area div.sp_pagination li.csPreviousPage a, div.sp_result_area div.sp_pagination li.csNextPage a, div.sp_result_area div.sp_pagination li.csLastPage a { width: 30px; }div.sp_result_area div.sp_pagination li.csFirstPage a { border-left: 0; border-bottom-left-radius: 2px; }div.sp_result_area div.sp_pagination li.csLastPage a { border-right: 0; border-bottom-right-radius: 2px; }div.sp_result_area div.sp_pagination>ul>li>a:hover { color: #000000; background-color: #E8E8E8; }div.sp_result_area div.sp_pagination>ul>li.disabled>a { color: #DDDDDD; cursor: default; }div.sp_result_area div.sp_pagination>ul>li.disabled>a:hover { color: #DDDDDD; background-color: white; }div.sp_result_area div.sp_pagination>ul>li.pageInfoBox>a { width: 178px; text-align: center; /* padding-left: 4px; padding-right: 4px; */color: #666666; font-size: 14px; }
4、书写并添加js代码。<script type="syntaxhighlighter" class="brush:js"><![CDATA[//表单声明元素<input type="text" id="selectPage" >//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]var tag_data = [ {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'}, {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'}, {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'}, {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}];//showField：设置下拉列表中显示文本的列//keyField：设置下拉列表项目中项目的KEY值，用于提交表单//data：数据源，可以是JSON数据格式，也可以是URL$('#selectPage').selectPage({ showField : 'desc', keyField : 'id', data : tag_data});//获得选中项目的文本内容$('#func1').click(function(){ alert($('#selectPage').selectPageText());});//清除所有选中的项目$('#func2').click(function(){ $('#selectPage').selectPageClear();});//动态修改选中项目$('#func3').click(function(){ $('#selectPage').val('20'); $('#selectPage').selectPageRefresh();});//设置插件禁用 / 启用$('#funcDisabled').click(function(){ if($('#selectPage').selectPageDisabled())//判断当前状态 $('#selectPage').selectPageDisabled(false); else $('#selectPage').selectPageDisabled(true);});]]></script>
5、代码整体结构。
6、查看效果。
