Question

I have a selectbox with some options.
Each option should, if selected, show a separate div.

Of course I could do it for every optionname/value like this:

HTML:

<form class="floatleft">
      <select size="1" id="stadtauswahl" name="Standortauswahl">
        <option value="" style="color: #666;">&nbsp;&nbsp;&nbsp;Bitte wählen Sie&nbsp;&nbsp;&nbsp;</option>
        <option value="/kontakt/hauptsitz/">&nbsp;&nbsp;&nbsp;Wiesbaden</option>
        <option value="/kontakt/berlin/">&nbsp;&nbsp;&nbsp;Berlin</option>
        <option value="/kontakt/bad-harzburg/">&nbsp;&nbsp;&nbsp;Bad Harzburg</option>
        <option value="/kontakt/koeln/">&nbsp;&nbsp;&nbsp;Köln</option>
        <option value="/kontakt/hamburg/">&nbsp;&nbsp;&nbsp;Hamburg</option>
        <option value="/kontakt/muenchen/">&nbsp;&nbsp;&nbsp;München</option>
        <option value="/kontakt/stuttgart/">&nbsp;&nbsp;&nbsp;Stuttgart</option>
      </select>
    </form>

jQuery:

$(document).ready( function() {
  $('#stadtauswahl').bind('change', function (e) { 
    if( $('#stadtauswahl').val() == '/kontakt/hauptsitz/') {
      $('#wiesbaden').slideToggle();
    }
    else{
      $('#wiesbaden').slideUp();
    }         
  });
});

But I want jQuery to read out the name and then select the div of the same name to show.

Answer 1

Try this code instead…

$(document).ready( function() {
    $('#stadtauswahl').bind('change', function (e) { 
        $(this).find("option").each(function() {
            var text = $(this).text().toLowerCase().split(" ").join("").trim();
            console.log("'" + text + "'");
            if ($(this).is(":selected")) {
                $('#' + text).slideDown();
            } else {
                $('#' + text).slideUp();
            }
        });
    });
});​

It will look for a div for each of the options (with all spaces removed from the text) and perform a slideUp() for all non-selected ones, and a slideDown() for the selected one.

Note

Ideally, you would give each of the divs to show/hide a class that you can use to hide them all and then it becomes easier to just show the one relevant one. Also, unless there’s a reason for having a path as the select value it would be better to use the div IDs as the values, so you don’t have to rely on the text not having invalid characters in it (for IDs).

It may make more sense to have an array of objects that have a url parameter and a text parameter, and you hold the index of each of them in the select options. This would mean you could simply look at the value of the selected option and use it to get all the associated info from the array.

Just options and thoughts – the above script will do what you ask though 🙂