var searchForm = {
formObj: null,
jsonUrlAgent: false,
filter: null,
ajaxSelect: null,
regAjaxSelect: function (json) {
this.ajaxSelect = json;
},
init: function (formName, filter) {
this.formObj = document.forms[formName];
this.filter = filter;
if (!this.formObj) {
alert('未在DOM中找到form元素[name=' + formName + ']');
return false;
}
//给select input赋值查询条件
if (this.filter) {
for (var i in this.filter) {
if (/AgentId(P|I)/.test(i) || !this.filter[i]) {
continue;
}
if (/^(input|select)$/i.test(this.formObj[i].tagName)) {
this.formObj[i].value = this.filter[i];
}
}
}
//先给 ajaxSelect 注册的元素获取AJAX数据
if (this.ajaxSelect) {
for (var k in this.ajaxSelect) {
if (this.formObj[k]) {
//已选择的值
if (typeof this.filter[k] == 'undefined') {
this.filter[k] = '';
}
selectNull(this.formObj[k].id);
selectChange(this.ajaxSelect[k][0], this.formObj[k].id, this.filter[k], this.ajaxSelect[k][1], this.ajaxSelect[k][2]);
}
}
}
//再处理层级关系的 AgentIdP AgentIdI
//设定有AgentIdP,一定有AgentIdI
if (this.formObj['AgentIdP']) {
if (this.jsonUrlAgent) {
//已手动定义了JSON地址
} else if (typeof jsonUrl == 'object' && typeof jsonUrl.myAgent == 'string') {
this.jsonUrlAgent = jsonUrl.myAgent;//全局中定义了 jsonUrl
} else {
alert('未配置的 agent 请求JSON 地址!');
return false;
}
if (!this.filter['AgentIdP']) {
this.filter['AgentIdP'] = '';
}
console.log(this.formObj);//有
selectNull(this.formObj['AgentIdP'].id);
selectChange(this.jsonUrlAgent, this.formObj['AgentIdP'].id, this.filter['AgentIdP'], 'AGENTID', 'AGENTNAME', this.reqAgentIdI);
}
},
reqAgentIdI: function () {
console.log(this.formObj);//到了这里就null了
if (this.filter && this.filter['AgentIdI']) {
selectNull(this.formObj['AgentIdI'].id);
selectChange(this.jsonUrlAgent + this.filter['AgentIdP'], this.formObj['AgentIdI'].id, this.filter['AgentIdI'], 'AGENTID', 'AGENTNAME');
}
}
}
用法
HTML部分
<form method="GET" action="" id="formSearch" name="formSearch">
<table width="100%" border="0">
<tr>
<td width="30%">渠道选择:
<select name="AgentIdP" id="AgentIdP" style="width:100px" onchange="selectNull('AgentIdI');selectChange(jsonUrl.myAgent+this.value,'AgentIdI','','AGENTID','AGENTNAME')">
<option value="1">百度</option>
</select>
<select name="AgentIdI" id="AgentIdI" style="width:100px">
<option>--</option>
</select>
游戏名称:
<input name="GameName" type="text" id="GameName" style="width:100px" /></td>
<td width="18%">
文件名:
<input name="FileName" type="text" id="FileName" style="width:100px" /></td>
<td width="16%">
<input type="submit" name="button" id="button" value="查找" style="width:80px; height:40px"/>
<input type="button" name="button2" id="button2" value="显示全部" style="width:80px; height:40px" onclick="location='http://localhost/index.php/gamedownurl/lst'"/></td>
</tr>
</table>
</form>
用到的函数selectNull 与 selectChange
/**
* @author fzb
* @description 清空select数据的所有option
* @param objId
*/
function selectNull(objId) {
var selObj = document.getElementById(objId);
selObj.options.length = 0;
selObj.options[0] = new Option(' 请选择 ', ' ');
selObj.options[0].className = 'dft-empty';
}
/**
* @author fzb
* @description 用于与selectNull配合自动分析返回JSON数据生成select option值
*
* @param ajaxUrl
* @param subId
* @param dftValue
* @param IdKeyName
* @param TxtKeyName
* @param callbackFunc
* @returns {boolean}
*/
function selectChange(ajaxUrl, subId, dftValue, IdKeyName, TxtKeyName, callbackFunc) {
var subObj = document.getElementById(subId);
if (!subObj) {
alert('不存在的子对象!');
return false;
}
$.getJSON(ajaxUrl, function (json) {
subObj.options.length = 0;
subObj.options[0] = new Option(' 请选择 ', '');
subObj.options[0].className = 'dft-empty';
var j = 1;
for (var i in json) {
subObj.options[j] = new Option(json[i][TxtKeyName], json[i][IdKeyName]);
j++;
}
if (dftValue) {
subObj.value = dftValue;
}
if (callbackFunc) {
callbackFunc();
}
});
}
//-----------------------------------------------------------
javascript部分
<script>
var jsonUrl = {"myAgent":"http:\/\/localhost\/index.php\/agent\/jsonMyAgent?pid=","myGame":"http:\/\/localhost\/index.php\/game\/jsonMyGame"};
var filter = {"GameName":"","FileName":"","AgentIdP":"1001","AgentIdI":"1003"};
var ajaxSelect = {
'GameId': [jsonUrl.myGame,'GAMEID','GAMENAME']
};
searchForm.regAjaxSelect(ajaxSelect);
searchForm.init('formSearch',filter);
</script>
结果到了 searchForm.reqAgentIdI 就提示报错了
TypeError: this.formObj is undefined
selectNull(this.formObj['AgentIdI'].id);
关闭重复问题: javascript 的 callback 是否有问题,会导致对象无法传递 - SegmentFault --依云
jsonUrl.myGame 无法识别
我随便找了个字符串替代了这个变量结果显示。
未配置的 agent 请求JSON 地址!