封装select标签封装数据源、参数及其级联

来源：互联网发布：mac打开terminal快捷键编辑：程序博客网时间：2024/05/19 23:01

html的select标签封装数据源及自定义传参

其中使用jQuery.post的方式进行异步请求的

初始化select

/** * 初始化select *  * @param url 请求地址 * @param params key:value,key:value * @param selectid 元素ID * @param valuename value值 id 或 value * @author nie * @result */function initMySelect(url, params, selectid, valuename) {$("#"+selectid+" option").remove();$("#" + selectid).append("<option value=''>请选择</option>");$.post(url, eval("(" + getJsonParam2(params) + ")"), function(data,textStatus) {var info = data.info;for (var i = 0; i < info.length; i++) {var optiondata = info[i];$("#" + selectid).append("<option value='" + optiondata[valuename] + "'>"+ optiondata.value + "</option>");}}, "json");}

这里注意下eval()函数的使用和后台返回参数我用的是json。

简单描述下：$,post(url, [data], [callback], [type] );

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。例如:{action:post,value}

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

获取到请求参数：getJsonParam2:

/** * 拼成带参数链接  *  * @param params : *            key:value,key:value * @author nie * @result {key:"value",key:"value"} */function getJsonParam2(param) {if (param == null) {return null;}var jsonStr = "";var params = param.split(",");for (var i = 0; i < params.length; i++) {var keyValue = params[i].split(":");if (i == (params.length - 1)) {jsonStr += keyValue[0] + ":'" + keyValue[1] + "'";} else {jsonStr += keyValue[0] + ":'" + keyValue[1] + "',";}}return "{" + jsonStr + "}";}

界面调用及其级联

 <select id="selectid" style="width:150px;" onchange="changedselect()"></select><select id="selectid2" style="width:150px;" ></select>  <script type="text/javascript">$(function(){initMySelect("${path}/***","Action:post","selectid","id");});function changedselect(){var id = $('selectid').val();//级联initMySelect("${path}/***","Action:post,pid:"+id,"selectid2","id");}  </script>

请求地址保密。。。

0 0