Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    double combo box with description ?

    Hi was wondering if i could get some help with this java script ( http://www.simplythebest.net/info/javascript15.html ), id like it to show a text descripton once a item in the 2nd menu pull down is selected like this one ( http://www.dynamicdrive.com/dynamici...bodescribe.htm ) but i have no clue even where to start.. any help would be great
    thanks

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Something like this ought to do it:

    <form name="doublecombo">
    <select name="example" size="1" onChange="redirect(this.options.selectedIndex); displaydesc()">
    <option>SimplytheBest Shareware</option>
    <option>SimplytheBest Affiliates</option>
    <option>SimplytheBest Metasearch</option>
    </select>
    <select name="stage2" size="1" onchange="displaydesc()">
    <option value="http://simplythebest.net/shareware.html">Index</option>
    <option value="http://simplythebest.net/business.html">Business</option>
    <option value="http://simplythebest.net/graphics.html">Graphics</option>
    </select>
    <input type="button" name="test" value="Go!"
    onClick="go()">
    <br />
    <span id="descriptions" align="left" style="font:italic 13px Arial"></span>
    </form>
    <script>
    <!--// Orignal Scripts:
    ////// Double Combo Script By Website Abstraction (www.wsabstract.com)
    ////// Drop down menu w/ description by Dynamic Drive (www.dynamicdrive.com)

    var groups=document.doublecombo.example.options.length
    var group=new Array(groups)
    var descr=new Array(groups)
    for (i=0; i<groups; i++){
    group[i]=new Array()
    descr[i]=new Array()
    }

    group[0][0]= new Option("Index","http://simplythebest.net/shareware.html")
    descr[0][0]= "Index description";
    group[0][1]= new Option("Business","http://simplythebest.net/business.html")
    descr[0][1]= "Business description";
    group[0][2]= new Option("Graphics","http://simplythebest.net/graphics.html")
    descr[0][2]= "Graphics description";

    group[1][0]=new Option("Art and Photo","http://www.simplythebest.net/affiliates/affiliate_programs/art_photo.html")
    descr[1][0]= "Art and Photo description";
    group[1][1]=new Option("Books","http://www.simplythebest.net/affiliates/affiliate_programs/books.html")
    descr[1][1]= "Books description";
    group[1][2]=new Option("Clothing","http://www.simplythebest.net/affiliates/affiliate_programs/clothing.html")
    descr[1][2]= "Clothing description";

    group[2][0]=new Option("Web Search","http://www.simplythebest.net/search/search.html")
    descr[2][0]= "Web Search description";
    group[2][1]=new Option("Auctions Search","http://www.simplythebest.net/search/auctions.html")
    descr[2][1]= "Auctions Search description";
    group[2][2]=new Option("MP3 Search","http://www.simplythebest.net/search/mp3search.html")
    descr[2][2]= "MP3 Search description";
    group[2][3]=new Option("Job Search","http://www.simplythebest.net/search/jobs.html")
    descr[2][3]= "Job Search description";

    var temp=document.doublecombo.stage2

    function redirect(x){
    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=0;i<group[x].length;i++){
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
    }
    temp.options[0].selected=true
    }

    function go(){
    location=temp.options[temp.selectedIndex].value
    }

    function displaydesc(){
    var desc=descr[document.doublecombo.example.selectedIndex][document.doublecombo.stage2.selectedIndex];
    if (document.all) descriptions.innerHTML=desc;
    else if (document.getElementById) document.getElementById("descriptions").innerHTML=desc
    }

    displaydesc()
    //-->
    </script>

  • #3
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you soooooooo much !!

  • #4
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jsut 2 more hopefully little things, i need to have it when you go to select the page it change in a frame/iframe.

    and the description will prob be a little paragraph, so how to i go about making it do multi lines vs one long line ?

  • #5
    New Coder
    Join Date
    Feb 2003
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Thats exactly the script i need thanx, but i would like the description to appear in a form box

    can someone modify the above script to make the description appear in a form box

    i would be very greatfull

    Thanx

    -=C0lin=-

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sure just add the text box to the form, let's say you named it txtdisplay, then you would just have to modify this function to look like so:

    function displaydesc(){
    var desc=descr[document.doublecombo.example.selectedIndex][document.doublecombo.stage2.selectedIndex];
    document.doublecombo.txtdisplay .value=desc;
    }

  • #7
    New Coder
    Join Date
    Feb 2003
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanx for the reply john,

    but i am a bit of a newbie to javascript.....what exactly do i replace....cud u just write out the whole script agen for me?

    sorry for bein a newb!

    and thanx for all the help

    -=C0lin=-

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    <form name="doublecombo">
    <select name="example" size="1" onChange="redirect(this.options.selectedIndex); displaydesc()">
    <option>SimplytheBest Shareware</option>
    <option>SimplytheBest Affiliates</option>
    <option>SimplytheBest Metasearch</option>
    </select>
    <select name="stage2" size="1" onchange="displaydesc()">
    <option value="http://simplythebest.net/shareware.html">Index</option>
    <option value="http://simplythebest.net/business.html">Business</option>
    <option value="http://simplythebest.net/graphics.html">Graphics</option>
    </select>
    <input type="button" name="test" value="Go!"
    onClick="go()">
    <br />
    <input type="text" name="txtdisplay">
    </form>
    <script>
    <!--// Orignal Scripts:
    ////// Double Combo Script By Website Abstraction (www.wsabstract.com)
    ////// Drop down menu w/ description by Dynamic Drive (www.dynamicdrive.com)

    var groups=document.doublecombo.example.options.length
    var group=new Array(groups)
    var descr=new Array(groups)
    for (i=0; i<groups; i++){
    group[i]=new Array()
    descr[i]=new Array()
    }

    group[0][0]= new Option("Index","http://simplythebest.net/shareware.html")
    descr[0][0]= "Index description";
    group[0][1]= new Option("Business","http://simplythebest.net/business.html")
    descr[0][1]= "Business description";
    group[0][2]= new Option("Graphics","http://simplythebest.net/graphics.html")
    descr[0][2]= "Graphics description";

    group[1][0]=new Option("Art and Photo","http://www.simplythebest.net/affiliates/affiliate_programs/art_photo.html")
    descr[1][0]= "Art and Photo description";
    group[1][1]=new Option("Books","http://www.simplythebest.net/affiliates/affiliate_programs/books.html")
    descr[1][1]= "Books description";
    group[1][2]=new Option("Clothing","http://www.simplythebest.net/affiliates/affiliate_programs/clothing.html")
    descr[1][2]= "Clothing description";

    group[2][0]=new Option("Web Search","http://www.simplythebest.net/search/search.html")
    descr[2][0]= "Web Search description";
    group[2][1]=new Option("Auctions Search","http://www.simplythebest.net/search/auctions.html")
    descr[2][1]= "Auctions Search description";
    group[2][2]=new Option("MP3 Search","http://www.simplythebest.net/search/mp3search.html")
    descr[2][2]= "MP3 Search description";
    group[2][3]=new Option("Job Search","http://www.simplythebest.net/search/jobs.html")
    descr[2][3]= "Job Search description";

    var temp=document.doublecombo.stage2

    function redirect(x){
    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=0;i<group[x].length;i++){
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
    }
    temp.options[0].selected=true
    }

    function go(){
    location=temp.options[temp.selectedIndex].value
    }

    function displaydesc(){
    var desc=descr[document.doublecombo.example.selectedIndex][document.doublecombo.stage2.selectedIndex];
    document.doublecombo.txtdisplay.value=desc;
    }

    displaydesc()
    //-->
    </script>

  • #9
    New Coder
    Join Date
    Feb 2003
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    thanx for that john, much appreciated

    -=c0lin=-

  • #10
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is an alternate Javascript Array I found, but I am can't figure out how to have the url's open up into a new window.

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    v=false;
    //-->
    </SCRIPT>

    <SCRIPT LANGUAGE="JavaScript1.1">
    <!--
    if (typeof(Option)+"" != "undefined") v=true;
    //-->
    </SCRIPT>

    <SCRIPT LANGUAGE="JavaScript">

    <!-- Original: webreference.com -->
    <!-- Web Site: http://webreference.com -->

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    if(v){a=new Array();aln=0;}
    function getFormNum (formName) {
    formNum =-1;
    for (i=0;i<document.forms.length;i++){
    tempForm = document.forms[i];
    if (formName == tempForm) {
    formNum = i;
    correctForm = tempForm;
    break;
    }
    }
    return formNum;
    }
    function jmp(formName,elementNum) {
    getFormNum(formName);
    if (formNum>=0) {
    with (document.forms[formNum].elements[elementNum]) {
    i=selectedIndex;
    if (i>=0) location=options[i].value;
    }
    }
    }
    function O(txt,url) {
    a[k]=new Option(txt,url);k++;
    }
    function relate(formName,elementNum,j) {
    if(v) {
    k=1;
    if(j==0) { // default category item
    a=new Array();
    O("Pick Item --->","");
    }

    if(j==1) { // 1st category items
    a=new Array();
    O("Pick Item --->","");
    O("Buttons","http://javascript.internet.com/buttons/");
    O("Clocks","http://javascript.internet.com/clocks/");
    O("Cookies","http://javascript.internet.com/cookies/");
    O("Forms","http://javascript.internet.com/forms/");
    O("Games","http://javascript.internet.com/games/");
    O("Messages","http://javascript.internet.com/messages/");
    O("Miscellaneous","http://javascript.internet.com/miscellaneous/");
    O("Navigation","http://javascript.internet.com/navigation/");
    O("Page Details","http://javascript.internet.com/page-details/");
    O("Pass. Protec.","http://javascript.internet.com/passwords/");
    O("Scrolls","http://javascript.internet.com/scrolls/");
    O("User Details","http://javascript.internet.com/user-details/");
    O("Table Of Contents","http://javascript.internet.com/toc.html");
    }

    if(j==2) { // 2nd category items
    a=new Array();
    O("Pick Item --->","");
    O("How Do I...?","http://forums.internet.com/cgi-bin/WebX?13@^265342@.ee6b7af");
    O("Script Help","http://forums.internet.com/cgi-bin/WebX?13@^265342@.ee6b7ab");
    O("Script Requests","http://forums.internet.com/cgi-bin/WebX?13@^265342@.ee6b7ad");
    O("Intro to JavaScript","http://forums.internet.com/cgi-bin/WebX?13@^265342@.ee6b7a7");
    O("What's New?","http://forums.internet.com/cgi-bin/WebX?13@^265342@.ee6b7a9");
    }

    if(j==3) { // 3rd category items
    a=new Array();
    O("Pick Item --->","");
    O("JS Question?","http://forums.internet.com/cgi-bin/WebX?14@^3027@.ee6b313");
    O("JS Contribution","http://javascript.internet.com/contribute.html");
    O("Site Comments","http://javascript.internet.com/contact-us.html");
    O("Other ...","http://javascript.internet.com/feedback.html");
    }

    aln2=a.length;
    getFormNum(formName);
    if (formNum>=0) {
    formNum = formNum + 1;
    with (document.forms[formNum].elements[elementNum]) {
    for (var i=options.length-1;i>0;i--) options[i]=null;
    for (var i=1;i<aln2;i++) options[i-1]=a[i];
    options[0].selected=true;
    }
    }
    } else {
    jmp(formName,elementNum);
    }
    }
    // End -->
    </SCRIPT>
    </head>

    <!-- STEP TWO: Put this code into the BODY of your HTML document -->

    <BODY>

    <center>
    <table border=0>
    <tr valign=top>
    <TD align=center><form name=f1 method=post action="" onSubmit="return false;">
    <select name=m1 onChange="relate(this.form,0,this.selectedIndex); document.f2.m2.focus();">
    <option value="/">Pick Category --->
    <option value="/">JavaScripts
    <option value="/">Message Forum
    <option value="/">Feedback Form
    </select></form></td>

    <td align=center> <b>then</b> </td>

    <td><form name=f2 method=post action="" onsubmit="return false;">
    <select name="m2" onchange="jmp(this.form,0)">
    <option value="/">Pick Item --->

    <!--

    Put a blank item (like below) for the MAXIMUM
    number of items in one of your categories.
    i.e. If your "largest" menu contains 5 items,
    include 5 blank lines here. For 10, include
    10, and so on.

    -->

    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">
    <option value="/">

    </select></form></td>

    </tr>
    </table>
    </center>

    <p><center>
    <font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>
    Last edited by MaxPower; 07-31-2005 at 09:33 PM.


  •  

    Posting Permissions

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