<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)
<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-*的数据拼在一起 }