用js实现菜单的联动选择

看如下例子:
先导入两个js文件:
<script language="JavaScript" src="../../../js/common.js"></script>
<script language="JavaScript" src="../../../js/define.js"></script>

看调用的例子:
<table width="100%" border="0" cellspacing="0" cellpadding="2">
          <tr bgcolor="#eeeeee">
            <td width="14%" height="36">&nbsp;</td>
            <td width="12%">工作类型</td>
            <td width="22%"><select name="sjbtype" style="width:160">
                <%=fetchList.fetchOptions("EMP")%> </select></td>
            <td width="10%">月薪范围</td>
            <td width="22%"><select name="sjbpay" style="width:160">
                <%=fetchList.fetchOptions("MP")%> </select></td>
            <td width="20%">&nbsp;</td>
          </tr>
          <tr>
            <td height="31" nowrap>&nbsp;</td>
            <td rowspan="2"> 工作地点<br>
              (最多可选5项) </td>
            <td><select name="sjbaddress" style="width:160" onChange="return backAddress()">
                <%=fetchList.fetchOptionsRegion()%> </select> </td>
            <td> </td>
            <td rowspan="2">  <select
           οndblclick="SelMove('sjbaddresssub')"
           style="FONT-SIZE: 12px; WIDTH: 180px" multiple
           size=8 name=sjbaddresssub>
              </select> </td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td height="112" nowrap>&nbsp;</td>
            <td id="n_sjbaddress_sub">  <select
               οndblclick=SelMove("sjbaddress_sub","sjbaddresssub",checkselect)
               style="FONT-SIZE: 12px; WIDTH: 180px" multiple
                size=7 name=sjbaddress_sub>
              </select> </td>
            <td> <input type="button" name="Submit" value="添加   》" onClick="SelMove('sjbaddress_sub','sjbaddresssub',checkselect)">
              <br> <input type="button" name="Submit2" value="《   删除" onClick="SelMove('sjbaddresssub')"></td>
            <td>&nbsp;</td>
          </tr>
          <tr bgcolor="#eeeeee">
            <td>&nbsp;</td>
            <td>行业<br>
              (最多可选5项)</td>
            <td><select name="sjbtrade" style="width:160" onChange="return backJob()" ondοndblclick="SelMove('sjbtrade','sjbtradesub',checkselect)" >
                <%=fetchList.fetchOptionsPost()%> </select></td>
            <td><input type="button" name="Submit3" value="添加   》" onClick="SelMove('sjbtrade','sjbtradesub',checkselect)">
              <br> <input type="button" name="Submit22" value="《   删除" onClick="SelMove('sjbtradesub')"></td>
            <td> <select
           οndblclick="SelMove('sjbtradesub')"
           style="FONT-SIZE: 12px; WIDTH: 180px" multiple
           size=6 name=sjbtradesub>
              </select> </td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td nowrap>工作岗位<br>
              (最多可选5项)</td>
            <td id="n_sjbpost"> <select
           οndblclick=SelMove("sjbpost","sjbpostsub",checkselect)
           style="FONT-SIZE: 12px; WIDTH: 180px" multiple
           size=6 name=sjbpost>
              </select> </td>
            <td><br> <input type="button" name="Submit4" value="添加   》" onClick="SelMove('sjbpost','sjbpostsub',checkselect)">
              <br> <input type="button" name="Submit23" value="《   删除" onClick="SelMove('sjbpostsub')">
            </td>
            <td> <select
           οndblclick="SelMove('sjbpostsub')"
           style="FONT-SIZE: 12px; WIDTH: 180px" multiple
           size=6 name=sjbpostsub>
              </select> </td>
            <td>&nbsp;</td>
          </tr>
          <tr bgcolor="#eeeeee">
            <td>&nbsp;</td>
                    <td>曾从事工作<br> <br>
              从事年限 </td>
            <td><input name="sjbworkyear" type="text" size="25"> <br> <br>
              <input name="textfield2" type="text" size="25"></td>
            <td>其他要求</td>
            <td><textarea name="sjbnote" cols="25" rows="5"></textarea></td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center" valign="middle">
            <td height="40" colspan="6"><input type="button" name="Submit5" value="保存" onClick="postskjbFrm()"></td>
          </tr>
        </table>


common.js文件:
//<script language=javascript>

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf(
'@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address./n';
      } else if (test!='R') {
        if (isNaN(val)) errors+='- '+nm+' must contain a number./n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(7,p); max=test.substring(p+1);
          if (val<min || max<val) errors+='- '+nm+' must contain a number between '+min+' and '+max+'./n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required./n'; }
  } if (errors) alert('The following error(s) occurred:/n'+errors);
  document.MM_returnValue = (errors == '');return document.MM_returnValue;
}

function MM_findObj(n, d) { //v4.0
  var p,i,x; 
  if(!d) d=document;
  if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document;
 n=n.substring(0,p);
 }
  if(!(x=d[n])&&d.all) x=d.all[n];
  for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n);
  return x;
}

//此函数实现列表中所选择项的删除与移到到别外一个列表中的功能.2001/04/04
//参数表:
//src 源列表
//des 目的列表(如果省略则删除源列表中选中的项)
//exce 如果源列表中某一项的文本与此参数相同则该项不能被移走或删除(可省略)
//d1 指定源列表所在的框架或窗口(如省略则在当前框架或窗口中查找)
//d2 指定目的列表所在的框架或窗口(如省略则在当前框架或窗口中查找)
//
function SelMove(src,des,check,exce,d1,d2,del) {
  //src = ""+src;
  //des = ""+des; 
  if (!src) return false;
        var oSrc=MM_findObj(src,d1);
        if (!oSrc) return false;
  
        if (!des) {
                for (i=0;i<oSrc.options.length;i++) {
                        if (oSrc.options(i).selected){
                                if (oSrc.options(i).innerText!=exce) {
                                        oSrc.options.remove(i);
                                        i--;
                                }
                        }
                }
        }
        else {
                var oDes=MM_findObj(des,d2);
                if (!oDes) return false;
                for (i=0;i<oSrc.options.length;i++) {
                        var oSrcOption =oSrc.options.item(i);
                        if(oSrcOption.selected){
                                if(check && check(oDes,oSrcOption)){
                                        if(oSrcOption.innerText!=exce) {
                                                var oOption = document.createElement("OPTION");
                                                oDes.options.add(oOption);
                                                oOption.innerText = oSrcOption.innerText;
                                                oOption.value = oSrcOption.value;
                                                oSrcOption.selected=false;
                                                if(del) {oSrc.options.remove(i);i--;}
                                        }
                                }
                        }
                }
        }
}

function SelSelectedAll(oSrc){
        if(!oSrc) return false;
        var i;
        for(i=0;i<oSrc.options.length;i++){
                oSrc.options.item(i).selected=true;
        }

}

function SelAdd(oDes,text,value){
        if (!oDes) return false;
        var oOption=document.createElement("OPTION");
        oDes.options.add(oOption);
        oOption.innerText=text;
        oOption.value=value;
}
function SelRemove(oSrc,name,value){
        if(!oSrc) return false;
        var i;
        for(i=0;i<oSrc.options.length;i++){
                if(oSrc.options.item(i).innerText==name && oSrc.options.item(i).value==value) {
                        oSrc.options.remove(i);
                        break;
                }
        }
}
function SelClear(des) {
        var oDes=MM_findObj(des);
        var i;
        if (oDes) {
                for (i=0;i<oDes.options.length;i++) {
                        oDes.options.remove(i);
                        i--;
                }
        }
}

//====================Trim serial function====================
function Trim(string)
{
        var ret = new String(string);
        var i=0;

        while(ret.charAt(i) == " ")
                i++;

        ret = ret.substring(i, ret.length);

        i=ret.length;
        while(ret.charAt(i-1) == " ")
                i--;

        ret = ret.substring(0, i);

        return ret;
}
function LTrim(string)
{
        var ret = new String(string);
        var i=0;

        while(ret.charAt(i) == " ")
                i++;

        ret = ret.substring(i, ret.length);

        return ret;
}
function RTrim(string)
{
        var ret = new String(string);
        var i=0;

        i=ret.length;
        while(ret.charAt(i-1) == " ")
                i--;

        ret = ret.substring(0, i);

        return ret;
}

//本函数做用为校验某页面中的某文本框内所输入的值是否负合要求。现在可以完成的校验有:
//  是否为空      “R”
//  是否是一个合法的Email地址  “isEmail”
//  是否是一个日期型数据   “isDate”
//  是否是一个数值型数据   “isNum”
//  是否是在一个在指定范围内的数值型数据 “inRangeXX:YY” ;XX为最小值,YY为最大值
//
//本函数一次可完成多个字段的校验,使用方法如下:
//本函数参数为三个一组,每个参数组的第一个参数为要检验字段的名称,第二个参数保留,传一个空值即可,
//第三个参数为该字段的数据类型,请参考上面所述的参数值使用,如某字段要求必需输入,则第三个参数为“R”,
//如必需为一Email地址,则第三个参数为“isEmail”,如该字段必需输入,且必需为一Email地址,则第三个参数为“RisEmail”。
//下面举一例子说明:
//
// 假设在页面内有三个文本框,三个文本框的名称分别为:"Name","Email","Age","Money",四个字段的要求分别为:
// Name:   不能为空,但可以输入任何字符。
// Email:   不能为空,且必须输入一个Email地址。
// Age:   不能为空,且必须为数字,且范围必需在18-40之间。
// Money:   不能为空,且必须为数字,但不指定范围。
// 现在要对这三个字段进行检查,那么函数为:
//  X_validateForm("Name","","R","Email","","RisEmail","Age","","RinRange18:40","Money","","RisNum");
// 如果要配合Form进行检验,可以写在Form的Onsubmit事件中或提交按钮的Onclick事件中;,完整语句如下:
// οnsubmit='return X_validateForm("Name","","R","Email","","RisEmail","Age","","RinRange18:40","Money","","RisNum");'
//
//此函数适用范围:
//此函数只能用来检查文本框控件内的值,且可以适应多文本框名称相同的情况,会对这些文本框都进行检查;
//如想检查列表框等其它控件内的值,可以使用本函数的另一版本,函数名为MM_validateForm(),用法基本一样,只是其不能检查
//多个文本框相同的情况,在这种情况下会提示出错。

function X_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=X_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; oval=MM_findObj(args[i]); msg=args[i+1];
 if (!oval) continue;
 if(oval.tagName) llength=1;
 else llength=oval.length;
    for(j=0;j<llength;j++) {
  if (llength==1) val=oval;
  else val=oval(j);
     if (val) { nm=val.name; if ((val=val.value)!="") {
 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值