Question

My problem is “how to change an options color (or disable) within a second drop down list depending on a first selection?” with javascript / jquery.

For example: If selected “13 Stairs” in my first drop down list 14 and 15 Stairs should have color “red” (or disabled) in the second drop down.

Something like “if option==13 Stairs* -> 14* / 15* == disabled” or
“if selected value “a” -> value “m-r” = red.”

Perhaps its very easy, but I’m a completly nood in Javascript. 🙁
Hopefully someone can hep me.

<form id="test" name="test" method="post" action="">
    <label for="demo"></label>
    <select name="first-election" id="first-election">
      <option value="a">13 Stairs - 001</option>
      <option value="b">13 Stairs - 002</option>
      <option value="c">13 Stairs - 003</option>
      <option value="d">14 Stairs - 001</option>
      <option value="e">14 Stairs - 002</option>
      <option value="f">14 Stairs - 003</option>
      <option value="g">15 Stairs - 001</option>
      <option value="h">15 Stairs - 002</option>
      <option value="i">15 Stairs - 003</option>
    </select>
<br /><br />
    <select name="color" id="color">
      <option value="j">13 Stairs - green</option>
      <option value="k">13 Stairs - yellow</option>
      <option value="l">13 Stairs - black</option>
      <option value="m">14 Stairs - green</option>
      <option value="n">14 Stairs - yellow</option>
      <option value="o">14 Stairs - black</option>
      <option value="p">15 Stairs - green</option>
      <option value="q">15 Stairs - yellow</option>
      <option value="r">15 Stairs - black</option>
    </select>
</form>

Answer 1

Here’s how to disable the options:

var $options = $('#color').find('option');

$('#first-election').change(function () {

    var num = parseInt( $('option:selected', this).text(), 10 );

    $options.prop('disabled', false).filter(function () {
        return $.text(this).indexOf(num) !== 0;
    }).prop('disabled', true);

}).change();

Here’s the fiddle: http://jsfiddle.net/Gp7fF/