Results 1 to 3 of 3

Thread: Xin yang- Chain Select menu

  1. #1
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Xin yang- Chain Select menu

    Hi,
    Hope there is a JS genius out there who can help me, I am trying to include an extra selection box for the Xin's chained select menu, I have added and amended the HTML part (I think it is correct see below) but I have tried every way i can think of to alter the config-js code to load data into another selection box, I have replaced the contents with letters to make it easier to follow through. the script below allows me to select the primary letter as A, the secondary letter an A1 – I need to select the third letter as A2 etc etc, I need to do this maybe up to 8 times in total but modifying the config-js code is beyond my capabilities.

    Any help appreciated.

    Weby.


    Code:
    <html>
    
    <head> 
    
    <script type="text/javascript" src="chainedmenu.js"></script> 
    <script type="text/javascript" src="config-1.js"></script>	 
    
    </head>
    
    <body onload="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel,'saveit')">	<!--this line amended to include fourth level-->
    
    <table align="center" cellpadding="0" cellspacing="0" border="0" width="90%"><tr><td>
    
    <form name="listmenu0">
    <table align="center"><tr>
    <td><select name="firstlevel" style="width:200px;"></select></td>
    <td><select name="secondlevel" style="width:200px;"></select></td>
    <td><select name="thirdlevel" style="width:200px;"></select></td>
    <td><select name="fourthlevel" style="width:200px;"></select></td> 	  <!--this line added-->
    <td><input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel)">	<!-- this line amended to include fourth level-->
    <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')"> </td>
    </tr></table>
    </form>
    
    </td></tr></table>
    </body>
    
    </html>
    
    
    
    
    Config-js.
    
    var disable_empty_list=true; 
    
    var onclickaction="goto" 
    
    var newwindow=0
    
    addListGroup("chainedmenu", "First-Select");
    
    addOption("First-Select", "Select an item", "", 1); //HEADER OPTION
    addList("First-Select", "Select a letter", "", "Webmaster");
    
    addOption("Webmaster", "Select Primary Letter", "", 1); //HEADER OPTION  	
    addList("Webmaster", "A", "", "A Letter");
    addList("Webmaster", "B", "", "B Letter"); 
    addList("Webmaster", "C", "", "C Letter");
    addList("Webmaster", "D", "", "D Letter"); 
    addList("Webmaster", "E", "", "E Letter"); 
    
    addOption("A Letter", "Select Secondary A Letter", "", 1); //HEADER OPTION
    addOption("A Letter", "A1", "http://www.Google.co.uk");
    
    
    addOption("B Letter", "Select Secondary B Letter", "", 1); //HEADER OPTION
    addOption("B Letter", "B1", "http://www.Google.co.uk"); 
    
    addOption("C Letter", "Select Secondary C Letter", "", 1); //HEADER OPTION
    addOption("C Letter", "C1", "http://www.Google.co.uk");
    
    
    addOption("D Letter", "Select Secondary D letter", "", 1); //HEADER OPTION
    addOption("D Letter", "D1", "http://www.Google.co.uk");
    
    
    addOption("E Letter", "Select Secondary E letter", "", 1); //HEADER OPTION
    addOption("E Letter", "E1", "http://www.Google.co.uk");
    Last edited by djr33; 10-11-2012 at 05:21 PM. Reason: added [code] tags

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    Please post the problem page.It will help.
    Thanks,

    Bud

  3. #3
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Chained select menu

    Quote Originally Posted by ajfmrf View Post
    Please post the problem page.It will help.


    Code:
    <html>
    
    <head> 
    
    <script type="text/javascript" src="chainedmenu.js">
     // Chained Menu
    
    // Copyright Xin Yang 2004
    // Web Site: www.yxScripts.com
    // EMail: m_yangxin@hotmail.com
    // Last Updated: 2004-08-23
    
    // This script is free as long as the copyright notice remains intact.
    
    var _disable_empty_list=false;
    var _hide_empty_list=false;
    
    // ------
    
    ///// DynamicDrive.com added function/////////////
    
    var onclickaction="alert"
    
    function goListGroup(){
    for (i=arguments.length-1;i>=0; i--){
    if (arguments[i].selectedIndex!=-1){
    var selectedOptionvalue=arguments[i].options[arguments[i].selectedIndex].value
    if (selectedOptionvalue!=""){
    if (onclickaction=="alert")
    alert(selectedOptionvalue)
    else if (newwindow==1)
    window.open(selectedOptionvalue)
    else
    window.location=selectedOptionvalue
    break
    }
    }
    }
    }
    
    ///// END DynamicDrive.com added function//////
    
    
    if (typeof(disable_empty_list)=="undefined") { disable_empty_list=_disable_empty_list; }
    if (typeof(hide_empty_list)=="undefined") { hide_empty_list=_hide_empty_list; }
    
    var cs_goodContent=true, cs_M="M", cs_L="L", cs_curTop=null, cs_curSub=null;
    
    function cs_findOBJ(obj,n) {
      for (var i=0; i<obj.length; i++) {
        if (obj[i].name==n) { return obj[i]; }
      }
      return null;
    }
    function cs_findContent(n) { return cs_findOBJ(cs_content,n); }
    
    function cs_findM(m,n) {
      if (m.name==n) { return m; }
    
      var sm=null;
      for (var i=0; i<m.items.length; i++) {
        if (m.items[i].type==cs_M) {
          sm=cs_findM(m.items[i],n);
          if (sm!=null) { break; }
        }
      }
      return sm;
    }
    function cs_findMenu(n) { return (cs_curSub!=null && cs_curSub.name==n)?cs_curSub:cs_findM(cs_curTop,n); }
    
    function cs_contentOBJ(n,obj){ this.name=n; this.menu=obj; this.lists=new Array(); this.cookie=""; }; cs_content=new Array();
    function cs_topmenuOBJ(tm) { this.name=tm; this.items=new Array(); this.df=0; this.addM=cs_addM; this.addL=cs_addL; }
    function cs_submenuOBJ(dis,link,sub) {
      this.name=sub;
      this.type=cs_M; this.dis=dis; this.link=link; this.df=0;
    
      var x=cs_findMenu(sub);
      this.items=x==null?new Array():x.items;
    
      this.addM=cs_addM; this.addL=cs_addL;
    }
    function cs_linkOBJ(dis,link) { this.type=cs_L; this.dis=dis; this.link=link; }
    
    function cs_addM(dis,link,sub) { this.items[this.items.length]=new cs_submenuOBJ(dis,link,sub); }
    function cs_addL(dis,link) { this.items[this.items.length]=new cs_linkOBJ(dis,link); }
    
    function cs_showMsg(msg) { window.status=msg; }
    function cs_badContent(n) { cs_goodContent=false; cs_showMsg("["+n+"] Not Found."); }
    
    function cs_optionOBJ(text,value) { this.text=text; this.value=value; }
    function cs_emptyList(list) { for (var i=list.options.length-1; i>=0; i--) { list.options[i]=null; } }
    function cs_refreshList(list,opt,df) {
      cs_emptyList(list);
    
      for (var i=0; i<opt.length; i++) {
        list.options[i]=new Option(opt[i].text, opt[i].value);
      }
    
      if (opt.length>0) {
        list.selectedIndex=df;
      }
    }
    function cs_getOptions(menu) {
      var opt=new Array();
      for (var i=0; i<menu.items.length; i++) {
        opt[i]=new cs_optionOBJ(menu.items[i].dis, menu.items[i].link);
      }
      return opt;
    }
    function cs_updateListGroup(content,idx,sidx,mode) {
      var i=0, curItem=null, menu=content.menu;
    
      while (i<idx) {
        menu=menu.items[content.lists[i++].selectedIndex];
      }
    
      if (menu.items[sidx].type==cs_M && idx<content.lists.length-1) {
        var df=cs_getIdx(mode,content.cookie,idx+1,menu.items[sidx].df);
    
        cs_refreshList(content.lists[idx+1], cs_getOptions(menu.items[sidx]), df);
        if (content.cookie) {
          cs_setCookie(content.cookie+"_"+(idx+1),df);
        }
    
        if (idx+1<content.lists.length) {
          if (disable_empty_list) {
            content.lists[idx+1].disabled=false;
          }
          if (hide_empty_list) {
            content.lists[idx+1].style.display="";
          }
    
          cs_updateListGroup(content,idx+1,df,mode);
        }
      }
      else {
        for (var s=idx+1; s<content.lists.length; s++) {
          cs_emptyList(content.lists[s]);
    
          if (disable_empty_list) {
            content.lists[s].disabled=true;
          }
          if (hide_empty_list) {
            content.lists[s].style.display="none";
          }
    
          if (content.cookie) {
            cs_setCookie(content.cookie+"_"+s,"");
          }
        }
      }
    }
    function cs_initListGroup(content,mode) {
      var df=cs_getIdx(mode,content.cookie,0,content.menu.df);
    
      cs_refreshList(content.lists[0], cs_getOptions(content.menu), df);
      if (content.cookie) {
        cs_setCookie(content.cookie+"_"+0,df);
      }
    
      cs_updateListGroup(content,0,df,mode);
    }
    
    function cs_updateList() {
      var content=this.content;
      for (var i=0; i<content.lists.length; i++) {
        if (content.lists[i]==this) {
          if (content.cookie) {
            cs_setCookie(content.cookie+"_"+i,this.selectedIndex);
          }
    
          if (i<content.lists.length-1) {
            cs_updateListGroup(content,i,this.selectedIndex,"");
          }
        }
      }
    }
    
    function cs_getIdx(mode,name,idx,df) {
      if (mode) {
        var cs_idx=cs_getCookie(name+"_"+idx);
        if (cs_idx!="") {
          df=parseInt(cs_idx);
        }
      }
      return df;
    }
    
    function _setCookie(name, value) {
      document.cookie=name+"="+value;
    }
    function cs_setCookie(name, value) {
      setTimeout("_setCookie('"+name+"','"+value+"')",0);
    }
    
    function cs_getCookie(name) {
      var cookieRE=new RegExp(name+"=([^;]+)");
      if (document.cookie.search(cookieRE)!=-1) {
        return RegExp.$1;
      }
      else {
        return "";
      }
    }
    
    // ----
    function addListGroup(n,tm) {
      if (cs_goodContent) {
        cs_curTop=new cs_topmenuOBJ(tm); cs_curSub=null;
    
        var c=cs_findContent(n);
        if (c==null) {
          cs_content[cs_content.length]=new cs_contentOBJ(n,cs_curTop);
        }
        else {
          delete(c.menu); c.menu=cs_curTop;
        }
      }
    }
    
    function addList(n,dis,link,sub,df) {
      if (cs_goodContent) {
        cs_curSub=cs_findMenu(n);
    
        if (cs_curSub!=null) {
          cs_curSub.addM(dis,link||"",sub);
          if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
        }
        else {
          cs_badContent(n);
        }
      }
    }
    
    function addOption(n,dis,link,df) {
      if (cs_goodContent) {
        cs_curSub=cs_findMenu(n);
    
        if (cs_curSub!=null) {
          cs_curSub.addL(dis,link||"");
          if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
        }
        else {
          cs_badContent(n);
        }
      }
    }
    
    function initListGroup(n) {
      var _content=cs_findContent(n), count=0;
      if (_content!=null) {
        content=new cs_contentOBJ("cs_"+n,_content.menu);
        cs_content[cs_content.length]=content;
    
        for (var i=1; i<initListGroup.arguments.length; i++) {
          if (typeof(arguments[i])=="object" && arguments[i].tagName && arguments[i].tagName=="SELECT") {
            content.lists[count]=arguments[i];
    
            arguments[i].onchange=cs_updateList;
            arguments[i].content=content; arguments[i].idx=count++;
          }
          else if (typeof(arguments[i])=="string" && /^[a-zA-Z_]\w*$/.test(arguments[i])) {
            content.cookie=arguments[i];
          }
        }
    
        if (content.lists.length>0) {
          cs_initListGroup(content,content.cookie);
        }
      }
    }
    
    function resetListGroup(n) {
      var content=cs_findContent("cs_"+n);
      if (content!=null && content.lists.length>0) {
        cs_initListGroup(content,"");
      }
    }
    // ------
    
    
    
    
    </script> 
    <script type="text/javascript" src="config-1.js">
    
    var disable_empty_list=true; 
    
    var onclickaction="goto" 
    
    var newwindow=0
    
    addListGroup("chainedmenu", "First-Select");
    
    addOption("First-Select", "Select an item", "", 1); //HEADER OPTION
    addList("First-Select", "Select a letter", "", "Webmaster");
    
    addOption("Webmaster", "Select First Letter", "", 1); //HEADER OPTION  	
    addList("Webmaster", "A", "", "A Letter");
    addList("Webmaster", "B", "", "B Letter"); 
    addList("Webmaster", "C", "", "C Letter");
    addList("Webmaster", "D", "", "D Letter"); 
    addList("Webmaster", "E", "", "E Letter"); 
    
    addOption("A Letter", "Select Option", "", 1); //HEADER OPTION
    addOption("A Letter", "A1", "http://www.Google.co.uk");
    
    addOption("B Letter", "Select Secondary B Letter", "", 1); //HEADER OPTION
    addOption("B Letter", "B1", "http://www.Google.co.uk"); 
    
    addOption("C Letter", "Select Secondary C Letter", "", 1); //HEADER OPTION
    addOption("C Letter", "C1", "http://www.Google.co.uk");
    
    addOption("D Letter", "Select Secondary D letter", "", 1); //HEADER OPTION
    addOption("D Letter", "D1", "http://www.Google.co.uk");
     
    addOption("E Letter", "Select Secondary E letter", "", 1); //HEADER OPTION
    addOption("E Letter", "E1", "http://www.Google.co.uk");
    
    
    
    
    </script>	 
    
    </head>
    
    <body onload="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'saveit')">
    
    <table align="center" cellpadding="0" cellspacing="0" border="0" width="90%"><tr><td>
    
    <form name="listmenu0">
    <table align="center"><tr>
    <td><select name="firstlevel" style="width:200px;"></select></td>
    <td><select name="secondlevel" style="width:200px;"></select></td>
    <td><select name="thirdlevel" style="width:200px;"></select></td>
    <td><input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">	
    <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')"> </td>
    </tr></table>
    </form>
    
    </td></tr></table>
    </body>
    
    </html>
    Last edited by jscheuer1; 10-12-2012 at 02:57 PM. Reason: Format

Similar Threads

  1. Topmenu3 and Chain Select Menu
    By Naschina in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-03-2009, 07:48 AM
  2. chain select menu help with current page
    By boryyytoe in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-06-2007, 02:15 PM
  3. Chain Select menu feature
    By Bornfree in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-13-2007, 10:34 PM
  4. using Chain Select !!
    By alex_funky_dj in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-30-2005, 10:57 AM
  5. Chain Select Menu
    By pepper in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-15-2004, 10:32 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •