html代码

<div class="formControls w-200">
    <input id="txtJCMC" runat="server" class="combo-box" data-cid="JCMC" div-height="200px" data-where="JC-only" />
    <input type="hidden" id="hiddenJCMC" runat="server" />
</div>

重要说明:

结构:必须是一个position:relative并且带有宽度的元素(例如:<div style="position:relative;">)包裹着两个input

input hidden 控件是必须的,在选中后hidden里面存有代码项的代码值

class="combo-box"是必须的,是重要初始化时查找插件的标识

div-height="*"是选填,下拉框的高度,如果填写那么超出高度就会自动添加滚动条。默认是选项有多高下拉框就多高。

data-*="*"是选填,是传输ajax到后台请求数据的参数。例如 (data-cid="JCMC"那么ajax请求是url参数后面就会自动拼接cid=JCMC)

引用的css 以及js

<link rel="stylesheet" type="text/css" href="css/combo-box.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="combo-box.js"></script>

使用及参数说明

$(function(){
 $(".combo-box").combox({ allow_chose_parent: true, ajax: { url: 'json/prov-city.json' } });
})
//参数说明
className: 'combo-box',//input的classname,默认值是combo-box
allow_input_value: false,//输入内容是否必须选项一致,也就是是否允许输入内容的意思
allow_chose_parent: false,//是否允许选择父节点
ajax: {//ajax请求
	url: '',//url参数
	type: 'GET',//类型
	dataType: 'json',//数据类型
	async: true,//是否异步
	data: { 'ajaxMethod': 'FirstAnsyData' }//ajax数据,会把 默认方法名 和 data-*的数据拼在一起
}