[JS] IE disabled select option 簡易解決方式

by Mesak

IE 在 disabled option 有點問題

參考了一下 http://tinyurl.com/l99f9這個的做法

其實也沒有多大參考,大概只有抄一下 CSS COLOR NAME而已

disabled 的同時 給予 option  CSS顏色

子SELECT 在選取到該顏色,就把值給清空,這樣就沒作用了

完整程式碼
http://jsfiddle.net/mesak/Nr9jH/2/

HTML Source

<select title="" name="color_p" size="1"><option selected="selected" value="">請選擇</option></select>
<select title="" name="color_p" size="1"><option value="1">藍色</option></select>
<select title="" name="color_p" size="1"><option value="2">紅色</option></select>
<select title="" name="color_p" size="1"><option value="3">黃色</option></select>
<select title="" name="color_c" size="1"><option selected="selected" value="">請選擇</option></select>
<select title="" name="color_c" size="1"><option value="1">藍色</option></select>
<select title="" name="color_c" size="1"><option value="2">紅色</option></select>
<select title="" name="color_c" size="1"><option value="3">黃色</option></select>

JavaScript Source

$("#color_p").change(function(){
var value = this.value
$("#color_c").children('option').each(function(i,n){
if( value == $(n).attr('value') ){
$(n).attr('disabled',true);
$(n).css({'color':'graytext'});
}else{
$(n).attr('disabled',false);
$(n).css({'color':'menutext'});
}
}).end().val('')
})
$("#color_c").change(function(){
if( this.value != '' && this.options[this.selectedIndex].style.color == 'graytext'){
this.value = '';
}
});

You may also like