www.webdeveloper.com
Results 1 to 3 of 3

Thread: HTML Drop-down menu to retain selection on page refresh?

  1. #1
    Join Date
    Feb 2012
    Posts
    3

    HTML Drop-down menu to retain selection on page refresh?

    Is there anyway to do this is pure html without java?

    The current html is as follows:

    <form name="form1">
    <select name="menu" onChange="location=document.form1.menu.options[document.form1.menu.selectedIndex].value;">
    <option value=''></option>
    <option value="<?php the_permalink() ?>?product_order=DESC">A-Z</option>
    <option value="<?php the_permalink() ?>?product_order=ASC">Z-A</option>
    <option value="<?php the_permalink() ?>">Price</option>
    <option value="<?php the_permalink() ?>?product_order=id">Recently Added</option>
    </select>
    </form>

    This works, the page reloads and the sorting is applied BUT the selection in the dropdown box returns to blank - I'd like it to display the 'active' selection?

    I'm assuming we might need to use PHP for the select="selected" but I'm pretty useless when it comes to PHP so need spoon feeding.

    Thanks in advance!

  2. #2
    Join Date
    Mar 2011
    Posts
    1,109
    You're already relying on JavaScript to automatically move the user to a different URL (you're not really refreshing the page), so you could also pass selectedIndex.value in the query string of the URLs and then have PHP add selected="selected" to the appropriate <option> tag. Something like:
    Code:
    <select name="menu" onChange="location=document.form1.menu.options[document.form1.menu.selectedIndex].value + '&amp;menuIndex=' + document.form1.menu.selectedIndex;">
    If you do, it would be a good idea to add a rel="canonical" tag to the page that shows the URL without the 'menuIndex' value in the query string so that search engines don't see extra URLs in your site with the same content. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Feb 2012
    Posts
    3
    Quote Originally Posted by rtrethewey View Post
    You're already relying on JavaScript to automatically move the user to a different URL (you're not really refreshing the page), so you could also pass selectedIndex.value in the query string of the URLs and then have PHP add selected="selected" to the appropriate <option> tag. Something like:
    Code:
    <select name="menu" onChange="location=document.form1.menu.options[document.form1.menu.selectedIndex].value + '&amp;menuIndex=' + document.form1.menu.selectedIndex;">
    If you do, it would be a good idea to add a rel="canonical" tag to the page that shows the URL without the 'menuIndex' value in the query string so that search engines don't see extra URLs in your site with the same content. Good luck!
    Thanks for the reply but that doesn't work either, it does add the &menuIndex= to the URL but the dropdown still 'forgets' the selection.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles