jQuery: display last selected option in dropdown

This is what I whipped up for our website; we use this to replace our nav bar on mobile devices.

<form>
    <select id="urlSelect">
        <option value="-">Default</option>
        <option value="/url1/">Option1</option>
        <option value="/url2/">Option2</option>
        <option value="/url3/">Option3</option>
    </select>
</form>

$('#urlSelect').bind('change', function() {
 if($(this).val() != "-"){
  [removed].href = $(this).val();
 }
});

$("#urlSelect option").each(function(){

 var urlRoot = "http://your-website-goes-here.com"; 
 var selectLinkValue = $(this).val();
 var currentLocation = new String( document.location );

 currentLocation = currentLocation.substr(urlRoot.length,selectLinkValue.length);
 
 if(currentLocation == selectLinkValue){
         $(this).attr('selected', 'selected');
   }
});

Hi there and thanks for your effort. I have just found the time to test it, but I’m stuck.

Here is what I did so far:

1. put your form into my template
2. put your code in [removed]-tags right beneath it (just for testing purposes)
3. entered my site’s URL into urlRoot

Unfortunately it doesn’t do anything at all. It seems, that the JS is not even triggered.

Can you please help? Thanks again.

Heiko

Paste the source code generated by EE and I’ll take another look.

If i understood correctly: why can’t you just use a if-statment on each option?

<option val="url1" {if last_segment == "url1"} selected="selected"{/if}>URL1</option>

I didn’t test this code, so sorry if there is a bug.

Nope. This does not work either.

Basically what I want is something like this:

http://500px.com/popular

If you select a specific category, the selected item on the select-box doesn’t reset to “Select category”, but shows the name of the selected category instead.

Can this be really so hard? Am I dumb? I don’t get it at all… 😛

I can’t see why that wouldn’t work.

<form>
    <select id="urlSelect" on change="window . location = $(this).val()">
        <option value="group/template">Default</option>
        <option value="group/template/url1" {if last_segment == "url1"} selected="selected"{/if}>Option1</option>
        <option value="group/template/url2" {if last_segment == "url2"} selected="selected"{/if}>Option2</option>
        <option value="group/template/url3" {if last_segment == "url3"} selected="selected"{/if}>Option3</option>
    </select>
</form>

This works here with me. Changed the jQuery a bit. And remember, as you mentioned earlier, notice the spaces on the javascript. (onchange and window . location)

Thank you! I don’t know, but I’m generating my navigation and URLs dynamically, which works great overall. The only thing I can’t get to work is this damn “show selected”-thing. A minor annoyance, which just drives me mad! 😉

<select name="select1" id="select1">
  {exp:ifelse parse="inward"}
      {if segment == 'all'}
      <option value="{path='{link}">{text}</option>
      {if:else}
      <option value="{path='{segment_1}'}{link}">{text}</option>
      {/if}
  {/exp:ifelse}
</select>

Oh my, I finally figured it out and it was oh so simple. No jQuery, no nothing!

I just hardcoded the first <option>-element and changed it’s title dynamically like this:

{if last_segment != "all"}
    {last_segment}
  {if:else}
    Select Category
{/if}

Thanks for everyone’s input though! 😊

Quería hacerle un regalo de cumple decente a mi hermano pero este mes andaba muy pelado de dinero por culpa de unas multas que me llegaron. Buscaba un sitio fiable para intentar multiplicar lo poco que me quedaba en la cuenta de ahorros. Entré en https://rolldorados.es/bonus y aproveché el código que me dieron al entrar por primera vez. Lo bueno es que aquí en España tienen un sistema de premios muy justo y te informan de todos los bonos activos que tienen, lo que te ayuda a decidir dónde poner tus fichas para que duren más y tengas más opciones de llevarte un premio grande.