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');
}
};

慢慢积累，水滴石穿。合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。这是出自老子的《道德经》。