How to disable select tag options through jQuery? Need help

Question

I have a query regarding Select tags option. plz any one solve through jQuery. Suppose i have two select tags, in the first select tags i have options of Languages and script and in the second tag of select i have option regarding languages & scripting. The problem is that if i select languages from 1st select tag than only languages option should be visible in the second tag. Like

<select id="Languages">
    <option value="0">--Select--</option>
    <option value="1">Languages</option>
    <option value="2">Scripting</option>
</select>
<select id="Scripting">
    <option value="0">--Select--</option>
    <option value="1">C#</option>
    <option value="2">VB</option>
    <option value="3">PHP</option>
    <option value="4">jQuery</option>
    <option value="5">javascript</option>
</select>

Now if i select Language option the only C#, VB & PHP should be visible and all other options will be disables.

Answer 1

You could do 2 approches to this.

1. Have an string in beginning of the id's on the options elements, ie:

< select id="first_select"> < option id="lang">Lang < option id="script>Script < /select>

< select id="second_select"> < option id="lang_1">Lang 1 < option id="script_1>Script 1 < /select>

The on the first select bind a on change event.

$('#first_select').change(function () {
    var type = $(this).attr('id');
    $('#second_select option').hide() // Hide all to just show the ones matching type
    $('#second_select option[id^=' + type + ']').show()
});

Two: Almost the same, but instead you use 1 select for each of the types in the first select element. And on change hade and show the appropriate one.

..fredrik

Answer 2

Here's a basic template that makes it relatively easy to configure:

var languagePairings = {
    language1: ['languageA', 'languageB'],
    language2: ['languageC', 'languageD']
};

$(function() {
    $('#select1').change(function() {
        var $select2 = $('#select2'),
            val = $(this).val(),
            availableLanguages = languagePairings[val];
        if (availableLanguages && availableLanguages.length) {
            for (var i = 0; i < availableLanguages.length; i++) {
                var lang = availableLanguages[i];
                $select2.append($('<option />').attr('value', lang).text(lang));
            }
        } else {
            $select2.empty();
        }
    });
});

Answer 3

First check out the article on Selected from jquery. I imagine your code will look something like this:

<select name="select1" id="select1">
  <option class="script">Scripting</option>
  <option class="language">Languages</option>
</select>

<select name="select2" id="select2">
  <option class="script">javascript</option>
  <option class="language">C#</option>
  <option class="script language">jQuery</option>
</select>

<script type="text/javascript">
  $("#select1").change(function () {
    $("#select2 option").disabled = true;
    $("#select1 option:selected").each(function () {
       var classname = $("#select1").attr("class");
       $("#select2 ."+classname).disabled = false;
     });
    })
  .trigger('change');
</script>

That's psuedo, off-the-top-of-my-head code, you may need to revise it a little, but the general idea is that you would assign a class to the options and use those class values to control which options are available in the second table.

Edit: Looks like hide does work on options, so you might replace "disabled = [boolean]" calls above with .show() or .hide() respectively. Also check out this earlier question:

http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery