jQuery输入框下拉选择菜单

1、新建html文档。

2、书写hmtl代码。

3、书写css代码。

div.sp_result_area div.sp_pagination li { text-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、查看效果。