引言：最近在给一个项目做后期维护，客户要求，根据用户所选择的select标签的选项来动态加载配置信息选项，然后按一定的方式把显示的配置选项组合起来添加到数据库中……
<table>
<thead></thead>
<tbody id="tbody_loadContPz">
<tr id="loadContPz_1">
<td width="50%">
<fieldset>
<legend>
<span class="STYLE1">配置内容1</span>
</legend>
<table>
<tr class="STYLE1">
<td>
<input type="radio" name="MatchChar_1" value="0"
checked="checked"
onclick="jQuery('#leftLenDiv_1').hide ();jQuery('#rightLenDiv_1').hide();" />
不指定偏移量匹配
</td>
<td>
<input type="radio" name="MatchChar_1" value="1"
onclick="jQuery('#leftLenDiv_1').show();jQuery ('#rightLenDiv_1').hide();" />
指定左偏移量匹配
</td>
<td>
<input type="radio" name="MatchChar_1" value="2"
onclick="jQuery('#leftLenDiv_1').hide();jQuery ('#rightLenDiv_1').show();" />
指定右偏移量匹配
</td>
<td>
<span class="STYLE1"> 规则操作:</span>
<select id="rule_1" onchange="toAddLoadCont(1)">
<option value="0" selected="selected">
--请选择--
</option>
<option value="1">
与
</option>
<option value="2">
或
</option>
</select>
</td>
</tr>
<tr>
<td class="STYLE1" colspan="2">
<div id="matchCharsDiv_1">
<br>
匹配字符：
<input type="text" id="NameChars_1" size="15" />
</div>
</td>
<td class="STYLE1" colspan="2">
<div id="leftLenDiv_1" style="display: none;">
<br>
左偏移量：
<input type="text" id="LeftLen_1" size="2" maxLength="2" />
</div>
<div id="rightLenDiv_1" style="display: none;">
<br>
右偏移量：
<input type="text" id="RightLen_1" size="2" maxLength="2" />
</div>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</tbody>
</table>
在单击“规则操作”时，当选择“与”或“或”的时候，动态的在本配置内容下添加一个配置内容(最多可添加四个)；当选择“请选择”的时候，本配置内容以下的全部配置信息失效（这里体现为不显示）。
下面是具体实现：
function toAddLoadCont(index){
if(jQuery("#rule_"+index).val()==0){ //当规则操作为“请选择”的时候，将本配置信息以下的所以项都隐藏起来，
loadContNum=index; //使用loadContNum来记录有效配置信息的编号
for(var i=index+1;i<=loadContIndex;i++){
jQuery("#loadContPz_"+i).hide();
}
}else if(loadContNum<=loadContIndex){ //loadContIndex 用记录配置内容的编号，
if(loadContIndex<=4&&jQuery("#loadContPz_"+(index+1)).html()==null){//当编号小于等于4且下项配置不存在的话，添加配置信息
loadContIndex++;
var loadContPz="<tr id='loadContPz_"+loadContIndex+"'><td width='50%'><fieldset><legend><span class='STYLE1'>负载内容"+loadContIndex+"</span></legend>";
loadContPz+="<table><tr class='STYLE1'><td><input type='radio' name='MatchChar_"+loadContIndex+"' value='0' checked='checked' onclick=\"jQuery('#leftLenDiv_"+loadContIndex+"').hide();jQuery('#rightLenDiv_"+loadContIndex+"').hide();\"/>不指定偏移量匹配 ";
loadContPz+="</td><td><input type='radio' name='MatchChar_"+loadContIndex+"' value='1' onclick=\"jQuery('#leftLenDiv_"+loadContIndex+"').show();jQuery('#rightLenDiv_"+loadContIndex+"').hide();\"/>指定左偏移量匹配 ";
loadContPz+="</td><td><input type='radio' name='MatchChar_"+loadContIndex+"' value='2' onclick=\"jQuery('#leftLenDiv_"+loadContIndex+"').hide();jQuery('#rightLenDiv_"+loadContIndex+"').show();\"/>指定右偏移量匹配 </td><td><div";
if(loadContIndex==5){ //当添加第五个配置信息的时候，将“规则操作”隐藏起来
loadContPz+=" style='display:none;'";
}
loadContPz+="><span class='STYLE1'> 规则操作:</span><select id='rule_"+loadContIndex+"' onchange='toAddLoadCont("+loadContIndex+")'>";
loadContPz+="<option value='0' selected='selected'>--请选择--</option><option value='1'>与</option><option value='2'>或</option></select>";
loadContPz+="</div></td></tr><tr><td class='STYLE1' colspan='2'><div id='matchCharsDiv_"+loadContIndex+"'><br>匹配字符：<input type='text' id='NameChars_"+loadContIndex+"' size='15'/><font color='red'>*</font></div></td>";
loadContPz+="<td class='STYLE1' colspan='2'><div id='leftLenDiv_"+loadContIndex+"' style='display: none;'><br>左偏移量：<input type='text' id='LeftLen_"+loadContIndex+"' size='2' maxLength='2'/></div>";
loadContPz+="<div id='rightLenDiv_"+loadContIndex+"' style='display: none;'><br>右偏移量：<input type='text' id='RightLen_"+loadContIndex+"' size='2' maxLength='2'/></div></td></tr></table></fieldset></td><td></td></tr>"
jQuery("#tbody_loadContPz").append(loadContPz);
loadContNum++;
}else if(loadContNum==index){ //当选项存在的时候，直接将其显示出来
jQuery("#loadContPz_"+(index+1)).show();
loadContNum++;
}
}
}
这样就完成了动态添加。下面来看一下如何将这些配置信息组合起来：
var loadCont=""; //存放组合信息
var tLoad = jQuery("#tbody_loadContPz");
for(var i=0;i<loadContNum;i++){ //使用for循环将各项信息组合起来
var matchChar = jQuery("input[name*='MatchChar_']:checked").eq(i);
var nameChars = jQuery("input[id*='NameChars_']").eq(i);
var rightLen = jQuery("input[id*=RightLen_]").eq(i);
var leftLen = jQuery("input[id*=LeftLen_]").eq(i);
var rule = jQuery("select[id*=rule_]").eq(i);
nameChars.val($.trim(nameChars.val()));
rightLen.val($.trim(rightLen.val()));
leftLen.val($.trim(leftLen.val()));
loadStr=validLoadCont(matchChar,nameChars,rightLen,leftLen,rule,i+1); //通过validLoadCont方法来验证并组合每个配置项
if(loadStr==false){ //返回内容为false代表未通过验证
return false;
}else{
loadCont+=loadStr;
}
}
jQuery("#loadCont").val(loadCont.substring(0,loadCont.length-1));
function validLoadCont(matchChar,nameChars,rightLen,leftLen,rule,index){
var str="";
var char=nameChars.val();
if(!(index==1&&matchChar.val()==0&&rule.val()==0)){
if(char.length==0){
alert("匹配内容不能为空！");
nameChars.focus();
return false;
}
}
if(matchChar.val()==0){
str=char;
}else if(matchChar.val()==1){
if(leftLen.val()==""){
alert("匹配字符的左偏移量不能为空！");
leftLen.focus();
return false;
}else if(!isNumber(leftLen.val())){
alert("匹配字符的左偏移量必须为正整数!");
leftLen.select();
return false;
}
str="^.{"+leftLen.val()+"}"+char;
}else {
if(rightLen.val()==""){
alert("匹配字符的右偏移量不能为空！");
rightLen.focus();
return false;
}else if(!isNumber(rightLen.val())){
alert("匹配字符的右偏移量必须为正整数!");
rightLen.select();
return false;
}
str=char+".{"+rightLen.val()+"}$";
}
if(rule.val()==1){
str+="&";
}else {
str+="|";
}
return str;
}
//验证是否为数字(为空返回false)：非空验证+数字验证
function isNumber(val) {
var val = jQuery.trim(val);
if(val.replace(/[\d+]/ig,"").length>0||val.length==0) {
return false;
}else {
return true;
}
}
虽然代码看起来有些乱，但最终功能还是实现了…… 