SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Problem with Double dropdown menu to open link

    The below script displays links to a webpage using a double drop down menu.
    I want the script to open the links directly in a new window or existing window.

    Plz advise how this can be done.
    Thank you!!!


    Code:
    <center><table bgcolor="f4e7c3" border="0" cellpadding="10" cellspacing="0" style="width: 100%px;"><tbody>
    <tr><td align="center" valign="MIDDLE" width="25%"><span style="color: #04384d; font-family: Trebuchet MS, sans-serif; font-size: large;">Select from the drop-down below</span><br /><br /><!-- The first select list -->
    Select Chapter: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
     <option />- - -
     <option value="ch1" />Chapter 1
     <option value="ch2" />Chapter 2
    </select>
    <!-- Tags for the seccond dropdown list, and for text-content -->
    <span id="slist2"></span> <div id="scontent"></div>
    
    <script><!--
    /* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
    var SList = new Object();             // JS object that stores data for options
    
    // HERE replace the value with the text you want to be displayed near Select
    var txtsl2 = 'Select Verse:';
    
    /*
     Property with options for the Seccond select list
     The key in this object must be the same with the values of the options added in the first select
     The values in the array associated to each key represent options of the seccond select
    */
    SList.slist2 = {
     "ch1": ['Ch1-Verse1', 'Ch1-Verse2'],
    "ch2": ['Ch2-Verse1',  'Ch2-Verse2']
    };
    
    /*
     Property with text-content associated with the options of the 2nd select list
     The key in this object must be the same with the values (options) added in each Array in "slist2" above
     The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
    */
    SList.scontent = {
    "Ch1-Verse1": '<a href=\'http://test.com/chapter-1-verse-1.html\'>Chapter 1 - Verse 1</a>',
    "Ch1-Verse2": '<a href=\'http://test.com/chapter-1-verse-2.html\'>Chapter 1 - Verse 2</a>',
    "Ch2-Verse1": '<a href=\'http://test.com/chapter-2-verse-1.html\'>Chapter 2 - Verse 1</a>',
    "Ch2-Verse2": '<a href=\'http://test,com/chapter-2-verse-2.html\'>Chapter 2 - Verse 2</a>'
    };
    
        /* From here no need to modify */
    
    // function to get the dropdown list, or content
    SList.getSelect = function(slist, option) {
      document.getElementById('scontent').innerHTML = '';           // empty option-content
    
      if(SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
        else if(slist == 'slist2') {
          var addata = '<option>- - -</option>';
          for(var i=0; i<SList[slist][option].length; i++) {
            addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
          }
    
          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
          document.getElementById('slist2').href = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
          document.getElementById('slist2').href = target="_blank";
        }
      }
      else if(slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
      }
    }
    --></script>
    </td></tr></tbody></table></center>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi there somkkk,

    Welcome to the forums

    To do what you want, you need to change two things.

    This:

    Code JavaScript:
    SList.scontent = {
    "Ch1-Verse1": '<a href=\'http://test.com/chapter-1-verse-1.html\'>Chapter 1 - Verse 1</a>',
    "Ch1-Verse2": '<a href=\'http://test.com/chapter-1-verse-2.html\'>Chapter 1 - Verse 2</a>',
    "Ch2-Verse1": '<a href=\'http://test.com/chapter-2-verse-1.html\'>Chapter 2 - Verse 1</a>',
    "Ch2-Verse2": '<a href=\'http://test,com/chapter-2-verse-2.html\'>Chapter 2 - Verse 2</a>'
    };

    into this:

    Code JavaScript:
    SList.scontent = {
    "Ch1-Verse1": 'http://test.com/chapter-1-verse-1.html',
    "Ch1-Verse2": 'http://test.com/chapter-1-verse-2.html',
    "Ch2-Verse1": 'http://test.com/chapter-2-verse-1.html',
    "Ch2-Verse2": 'http://test.com/chapter-2-verse-2.html'
    };

    Here you are removing the markup from the string and just leaving the url.

    Then change this:

    Code JavaScript:
    if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];

    into this:

    Code JavaScript:
    if(slist == 'scontent') window.location = SList[slist][option];

    and the link will be followed.

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Pullo,

    Thanks a lot for the immediate reply!
    Greatly helped!

    Could u also guide me how the resultant link can be opened in a new window ?
    I tried window.open, but didn't work.

    Tx!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Try this:

    Code JavaScript:
    if(slist == 'scontent') window.open(SList[slist][option]);

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works beautifully.

    Thanks a lott!


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
  •