0

I am using a simple little script that should allow a drop down list to enable/ disable the second dropdown list with the relevant data, but it is not working correctly.

Here is all the code and html:

$("[name='pet_type']").change(function () {
    var pet_type = $(this).val();
    $("[name='breed']").removeAttr("disabled");
    $("select[name='breed'] > option").each(function () {
        var o = $(this);
        console.log(o.data('pet-type'));
        console.log(pet_type);
        if (o.data('pet-type') === pet_type) {
            o.hide();
        } else {
            o.show();
        }
    });
});

HTML:

<select name="pet_type">
    <option></option>
    <option value="Cat" data-pet-type="Cat">Cat</option>
    <option value="Dog" data-pet-type="Dog">Dog</option>
</select>
<select name="breed" disabled="disabled">
    <option></option>
    <option data-pet-type="Cat" disabled="disabled">--- Cat Breeds</option>
    <option value="Chartreux" data-pet-type="Cat">Chartreux</option>
    <option value="Cymric" data-pet-type="Cat">Cymric</option>
    <option data-pet-type="Dog" disabled="disabled">--- Dog Breeds</option>
    <option value="Affenpinscher" data-pet-type="Dog">Affenpinscher</option>
    <option value="Anatolian Shepherd Dog" data-pet-type="Dog">Anatolian Shepherd Dog</option>
    <option value="Other">Other</option>
</select>

All that is happening is when you click on an option is the first downdrop, it just enables the second dropdown with all the data for cats and dogs, when really it should only enable data for the 1 option that is selected.

If anyone has any ideas on why this is not working correctly that would be much appreciated.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
user3642210
  • 111
  • 1
  • 1
  • 12

1 Answers1

3

The problem is simply that you can't hide individual option tags in most browsers. Instead, you can disable them:

o.prop('disabled',true); // or false

or .detach() the unwanted options and re-attach them later:

window.all_options = $("[name='breed'] > option").detach(); // global variable

$("[name='pet_type']").change(function () {
    var pet_type = $(this).val();
    $("[name='breed']").removeAttr("disabled").append(window.all_options);
    $("select[name='breed'] > option").each(function () {
        var o = $(this);
        if (o.data('pet-type') !== pet_type) {
            o.detach();
        }
    });
});
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • Here is a fixed demo (with slightly cleaner JavaScript) http://jsfiddle.net/UUd55/2/ – Jason Sperske May 15 '14 at 19:19
  • And yes I looked up cat and dog breeds to make the HTML :) – Jason Sperske May 15 '14 at 19:25
  • I have now done this. I got the code from an email my brother sent me. – user3642210 May 15 '14 at 19:29
  • I meant I got the original code from an email that is why there was smart-quotes. Blazemonger, that worked an absolute charm! thank you very much. – user3642210 May 15 '14 at 19:38
  • Just out of curiosity, would it be difficult to make the script so when you choose cat or dog in the first dropdown, it automatically jumps to the relevant list in the drop down? So if you selected cat it would automatically jump to the Cat Breed list? – user3642210 May 15 '14 at 19:45
  • Yes, you can change the selected option with `.prop('selected', true/false)`, or simply set the `.val(newval)` on the `select` element. The vanilla-JS approach is to set [`select.selectedIndex`](http://stackoverflow.com/q/6210390/901048) – Blazemonger May 15 '14 at 19:46
  • I have just seen the 'and re-attach them later' part. Tested, checked and looks perfect. Thank you Blazemonger! – user3642210 May 15 '14 at 19:47