select下拉框的onclick事件和onchange事件

  select下拉框中的option是沒有onclick事件的，但是如果是想某一個option發生變化，可以試着用select的onchange事件來操作option中的屬性。注意在firefox中是可以實現option的單擊事件的，其他瀏覽器IE、Google是不支持的。

在火狐firefox中這段代碼是可以執行出來的：

<select name="tableType">
<option onclick="year();" value="1">年報</option>
<option onclick="halfYear();" value="2">半年報</option>
<option onclick="quarterly();" value="3">季報</option>
<option onclick="month();" value="4">月報</option>
</select>

但是在其他瀏覽器則是不支持的，可能跟瀏覽器的內核以及對CSS、JS、HTML的國際標准的符合情況不一樣有關系。

如果是這樣的話，考慮到瀏覽器的兼容性，可以用select標簽的onchange事件通過option的value屬性來控制option的部分功能。

<select id="tableType" name="tableType" onchange="getTableType();">
<option value="1">年報</option>
<option value="2">半年報</option>
<option value="3">季報</option>
<option value="4">月報</option>
</select>

JS中，可以獲取option的value值來改變某一個option的樣式以及其他的東西。我這里只是改變了某一些標簽的樣式。

function getTableType(){
var value=$("#tableType").val();
/*alert(value);*/

if(value=='1'){
$('.halfYear').css('display','none');
$('.quarterly').css('display','none');
$('.month').css('display','none');
}
if(value=='2'){
$('.halfYear').css('display','block');
$('.quarterly').css('display','none');
$('.month').css('display','none');
}
if(value=='3'){
$('.halfYear').css('display','none');
$('.month').css('display','none');
$('.quarterly').css('display','block');
}
if(value=='4'){
$('.halfYear').css('display','none');
$('.quarterly').css('display','none');
$('.month').css('display','block');
}
};

慢慢積累，水滴石穿。合抱之木，生於毫末；九層之台，起於累土；千里之行，始於足下。這是出自老子的《道德經》。