dropdown selection click function only works once

Question

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>

score 2 · Answer 1 · answered Feb 15 '12 at 22:27

2

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();

answered Feb 15 '12 at 22:27

Selvakumar Arumugam

79,297
15
120
134

@user971824 Notice that this solution shouldn't be cross-browser compatible, especially older versions of IE. See my answer for more info. – Christofer Eliasson Feb 15 '12 at 22:38
Thanks Christofer Eliasson how exactly do I convert it to be cross browser compatible? – Malcr001 Feb 15 '12 at 22:41

score 2 · Accepted Answer · answered Feb 15 '12 at 22:39

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.)

score 0 · Answer 3 · edited May 23 '17 at 09:59

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.

score 0 · Answer 4 · answered Feb 15 '12 at 22:33

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>

dropdown selection click function only works once

4 Answers4