CODEWITHSUNDEEP
jquery
Malcr001
Malcr001

Reputation: 8289

dropdown selection click function only works once

I'm trying to use jquery to narrow down my selections of towns when the user selects a county. The following only works once:

$('#county > option').live("click",function(){

    var clicked_county = $(this).val();
    $('#town > option').not("."+clicked_county).hide();
});


<select name="county" id="county">
  <option>All Countys</option>
  <option>Middlesex</option>
  <option>Berkshire</option>
  <option>Bedfordshire</option>
</select>

<select name="town" id="town">
  <option>All Towns</option>
  <option class="Middlesex">Ruislip</option>
  <option class="Middlesex">Hillindon</option>
  <option class="Uxbridge">Uxbridge</option>
</select>

Upvotes: 0

Views: 895

Answers (4)

nnnnnn
nnnnnn

Reputation: 150030

Currently you hide the options that aren't needed but never show them again when the selection changes. So the simple solution is just to say:

$('#town > option').show().not("."+clicked_county).hide();

However, hiding options doesn't work in all browsers - for some browsers you need to actually remove them, so I'd suggest something like the following:

$(document).ready(function() {
    var $town = $("#town"),
        // get a copy of all the towns
        $towns = $("#town > option").clone();

    $("#county").change(function() {
        var selCounty = $(this).val();

        // remove all, then add back in the appropriate ones
        $town.children().remove();
        if (selCounty=="All Countys")
           $town.append($towns);
        else
           $town.append($towns.filter("." + selCounty));
    });
});

Demo: http://jsfiddle.net/VQ7CJ/

(Note: You can use the change event on the select rather than the click event on every option. Also I wouldn't use .live() unless the element(s) you want to attach event handlers will be created/changed dynamically after binding the handler, which I don't think is the case here, and in any case .live() is deprecated as of jQuery 1.7, so use .on() instead, or .delegate() if you're on an earlier version.)

Upvotes: 2

mpm
mpm

Reputation: 20155

this should work , check the javascript :

<select name="county" id="county">
  <option>All Countys</option>
  <option>Middlesex</option>
  <option>Berkshire</option>
  <option>Bedfordshire</option>
</select>

<select name="town" id="town">
  <option>All Towns</option>
  <option class="Middlesex">Ruislip</option>
  <option class="Middlesex">Hillindon</option>
  <option class="Bedfordshire">Uxbridge</option>
</select>

    <script type="text/javascript">
  $('#county').live("change",function(){
    $('#town > option').show();
    var clicked_county = $(this).val();
    $('#town > option').not("."+clicked_county).hide();
  });
</script>

Upvotes: 0

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

According to this SO question using .hide() to hide options from a select-element isn't cross-browser compatible.

Instead I guess you have to actually .remove() them from the list. You could store a complete list of options in a variable in the meantime, so that you can restore the options if the user chooses another county.

This SO answer presents a small jQuery plugin to give you cross-browser support for a similar need.

Another solution would be to use the disabled="disabled" to disable the options you don't want. They would of course still remain in the list, but the wouldn't be selectable.

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

You are hiding the options based on selection from #county.. but you have to show them back when other option is selected..

Try 

$('#town > option').show().not("."+clicked_county).hide();

Upvotes: 2

Related Questions