selectpage.js 下拉框实现多选的使用方法

第一步：下载 selectpage.js,并引用js和css

<link rel="stylesheet" href="/SelectPage/selectpage.css" type="text/css"></link>
<script type="text/javascript" src="/SelectPage/selectpage.js"></script>

 第二步：创建input，定义id为“selectPage”

<input type="text" id="selectPage" />

第三步，编写js代码

//创建下拉框数据 
var tag_data = [
    {id:1,desc:'发热'},			 
    {id:2,desc:'咳嗽'},			 
    {id:3,desc:'恶心'},			 
    {id:4,desc:'呕吐'},			 
    {id:5,desc:'头痛'},			 
    {id:6,desc:'疱疹'},			 
    {id:7,desc:'腹泻'},			 
    {id:8,desc:'感冒'},			 
    {id:9,desc:'其他'}
]
$('#selectPage').selectPage({
			    showField : 'desc',
			    keyField : 'id',
			    data : tag_data,
			    multiple : true,
			    //仅选择模式，不允许输入查询关键字
			    selectOnly : true,
			    //关闭分页栏，数据将会一次性在列表中展示，上限200个项目
			    pagination : false,
			    multipleControlbar :false,
			    orderBy : ['id'],
			    selectToCloseList:false,
			    eSelect : function(data){
                    //选择数据后回调
                    alert(data.id);			    
			        
			    },
			    eTagRemove : function(data){
                  //删除数据后回调
			      if(data.length!=0 && data[0].id==9)
			      {
			          
			      }
			    },
			    eOpen:function(){
                  //打开下拉框回调，调节下拉框宽度
			      //$(".sp_result_area").css("width",$(".sp_container").width());
			    },
			    //关闭向下的三角尖按钮
			    //dropButton : false
			}); 

第四步，如何获取下拉框选中的值？

var selectcontent=$('#selectPage').selectPageData()[0].defaultValue

 第五步，如何为下拉框赋值？

//赋值  
$('#selectPage').val(1,2,3);
//要刷新下拉框，这步不能少
 $('#selectPage').selectPageRefresh();

第六步，api

https://github.com/TerryZ/SelectPage

第七步，下载地址

https://download.csdn.net/download/wf001015/13279776