jquery - Select and disable options in 6 select elements at once -

i want handle select boxes behave simultaneously. when selecting option in select1a, select1b or select1c value should same in these three. additional that, selected value should disabled in other group of 3 select boxes. select2a, select2b , select2c should react same way.

i found here on stacoverflow code , cut together, works in opera 12, not in firefox or opera 15 or safari. maybe give me quick hint problem?

http://jsfiddle.net/7ltxc/

js:

$('#select1a, #select1b, #select1c').change(function() {     $('#select1a, #select1b, #select1c').not(this)         .children('option[value=' + this.value + ']')         .attr('selected', true)         .siblings().removeattr('selected');     $('#select2a, #select2b,#select2c').not(this)         .children('option[value=' + this.value + ']')         .attr('disabled', true)         .siblings().removeattr('disabled'); }); $('#select2a, #select2b, #select2c').change(function() {      $('#select2a, #select2b, #select2c').not(this)         .children('option[value=' + this.value + ']')         .attr('selected', true)         .siblings().removeattr('selected');     $('#select1a, #select1b,#select1c').not(this)         .children('option[value=' + this.value + ']')         .attr('disabled', true)         .siblings().removeattr('disabled'); }); 

html

<table> <tr>     <td>         <select id="select1a" name="select1a" size="5">             <option value="1">2-3</option>             <option value="2" disabled="disabled">4</option>             <option value="3">5-6</option>             <option value="4">16</option>             <option value="5" selected="selected">17-18</option>         </select>     </td>     <td>         <select id="select1b" name="frage_1" size="5">             <option value="1">text 1</option>             <option value="2" disabled="disabled">text 2</option>             <option value="3">text 3</option>             <option value="4">text 4</option>             <option value="5" selected="selected">text 5</option>         </select>     </td>     <td>         <select id="select1c" name="select1c" size="5">             <option value="1">7</option>             <option value="2" disabled="disabled">15</option>             <option value="3">10</option>             <option value="4">15</option>             <option value="5" selected="selected">7</option>         </select>     </td> </tr> <tr>     <td>         <select id="select2a" name="select2a" size="5">             <option value="1">2-3</option>             <option value="2" selected="selected">4</option>             <option value="3">5-6</option>             <option value="4">16</option>             <option value="5" disabled="disabled">17-18</option>         </select>     </td>     <td>         <select id="select2b" name="frage_2" size="5">             <option value="1">text 1</option>             <option value="2" selected="selected">text 2</option>             <option value="3">text 3</option>             <option value="4">text 4</option>             <option value="5" disabled="disabled">text 5</option>         </select>     </td>     <td>         <select id="select2c" name="select2c" size="5">             <option value="1">7</option>             <option value="2" selected="selected">15</option>             <option value="3">10</option>             <option value="4">15</option>             <option value="5" disabled="disabled">7</option>         </select>     </td> </tr> </table> 

update js follows , work:

  $('#select1a, #select1b, #select1c').change(function () {       $('#select1a, #select1b, #select1c').not(this).val($(this).val());       $('#select2a,  #select2b, #select2c').find('option:not([value="' + $(this).val() + '"])').removeattr("disabled");       $('#select2a,  #select2b, #select2c').find('option[value="' + $(this).val() + '"]').attr("disabled", "disabled");   });    $('#select2a, #select2b, #select2c').change(function () {       $('#select2a, #select2b, #select2c').not(this).val($(this).val());       $('#select1a,  #select1b, #select1c').find('option:not([value="' + $(this).val() + '"])').removeattr("disabled");       $('#select1a,  #select1b, #select1c').find('option[value="' + $(this).val() + '"]').attr("disabled", "disabled");   }); 

fiddle