SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member lindsm's Avatar
    Join Date
    Aug 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Drop-down lists redirect automatically ...

    I need several drop-down list on a web page. Each of these drop-down lists should redirect when a new item is selected. Here is my code ...

    This first one works perfectly...
    <select name="NavSelect" onchange="Navigate(this.form)">
    <option value="2008">2008</option>
    <option value="cal2007.htm">2007</option>
    <option value="cal2006.htm">2006</option>
    </select>


    However, the second two do not. They go to a blank page instead of the page indicated in the code. I'm sure I'm missing something simple.

    <td style="width: 41px">May</td>
    <td style="width: 31px" class="style5">
    <select name="NavSelect2" onchange="Navigate(this.form)">
    <option value="Management">Management</option>
    <option value="awardsMay08.htm">Awards</option>
    <option value="openingsMay08.htm">New Openings</option>
    <option value="proposalsMay08.htm">Proposals</option>
    </select></td>

    <td style="width: 116px" class="style5">
    <select name="NavSelect3" onchange="Navigate(this.form)">
    <option value="Tech">Tech</option>
    <option value="mayMtg.htm">Video</option>
    <option value="This%20is%20a%20Test.mht">Slides</option>
    </select>
    </td>


    Any help with this ASAP would be greatly appreciated!!! Thanks!

  2. #2
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the details of the Navigate function?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  3. #3
    SitePoint Member lindsm's Avatar
    Join Date
    Aug 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function Navigate() {
    var number = NavSelect.selectedIndex;
    location.href = NavSelect.options[number].value; }

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi lindsm, welcome to SitePoint

    The difference between the selects is the name, maybe it is the javascript that you should check if it gets the names right.

    Edit:

    @blain, Please continue, I didn't refresh before posting.
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Member lindsm's Avatar
    Join Date
    Aug 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Please explain further ....

    When the Select names were exactly the same it didn't do anything at all when an item was selected from the drop-down. I figured this caused a conflict so I changed them (added 2, 3, etc.). At this point it looks like it is trying to redirect to the page when an item is selected however it just comes up blank with the same page indicated as the URL.

  6. #6
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using this instead, it's not perfect but it works.

    select name="select" id="select" onchange="top.location = document.getElementById('select').value;"

    Or ask the question again in the javascript forum.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  7. #7
    SitePoint Member lindsm's Avatar
    Join Date
    Aug 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    That works .... can anyone tell me what was wrong with the code I was using? why it worked for one but not the rest on the page???


    Thanks!

  8. #8
    SitePoint Member lindsm's Avatar
    Join Date
    Aug 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down

    That fix only works on the second drop-down.... the third still does not work properly.


    Help!

  9. #9
    SitePoint Member lindsm's Avatar
    Join Date
    Aug 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was able to fix the third by changing the select name ... however, I'd still like to know what was wrong with my original code and how to fix it???

  10. #10
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your problem is in your function
    Code:
    function Navigate() {
    var number = NavSelect.selectedIndex;
    location.href = NavSelect.options[number].value; }
    NavSelect refers to an element in the document with the name="NavSelect"

    So no matter where you call that function from, it will always refer to that select element. You essentially hardcoded it to only work with that single menu. You seemed to have made an attempt to pass the element in, but you didn't do it right(the select element doesnt have a form property), nor did you actually use the value you passed into the function.

    Instead
    Code:
    function Navigate(selectElement) {
        location.href = selectElement.options[selectElement.selectedIndex].value;
    }
    Code:
    <select name="NavSelect" onchange="Navigate(this)">
    <option value="2008">2008</option>
    <option value="cal2007.htm">2007</option>
    <option value="cal2006.htm">2006</option>
    </select>
    By passing "this" into the function, you pass the actual select element in.

    This works too, if it makes it more clear whats going on
    Code:
    <select onchange="location.href = this.options[this.selectedIndex].value;">
    <option value="2008">2008</option>
    <option value="cal2007.htm">2007</option>
    <option value="cal2006.htm">2006</option>
    </select>

  11. #11
    SitePoint Member lindsm's Avatar
    Join Date
    Aug 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    This works great ... thank you for the explanation!

    This is the first time I've had to use a drop-down in this way and got the Navigate function from a site on the internet.

    Thanks again!


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
  •