select option firefox和chrome 对onclick的支持 使用on

select option firefox和chrome 对onclick的支持

firefox支持select和option增加onclick事件，举例：

<select name="zylx" id="s0">
<option selected="selected" value="none">请选择专业层次</option>
<option value="本科" onclick="courseSel('本科')">本科</option>
<option value="专科" onclick="courseSel('专科')">专科</option>
</select>

但是chrome的select支持onclick事件(数据会错位)，但是不支持option的onclick事件

所以想要兼容firefox和chrome必须使用.on

实例：

html:

<select name="zylx" id="s0">
<option selected="selected" value="none">请选择专业层次</option>
<option value="本科">本科</option>
<option value="专科">专科</option>
</select>

js:

$(function () {
/* var course = $("#s0").val();
alert($("#s0").val());
courseSel(course); */
/* $("#s0").bind("click",function(){
alert($(this).val());
}); */
$("#s0").on("change",function(){
var course = $("#s0").val();
courseSel(course);
});
});

//选择专业
function courseSel(course) {
if (course == "本科") {
var html = '<option value="none">请选择</option>';
html += '<option value="工商管理">工商管理</option>' +
'<option value="行政管理">行政管理</option>' +
'<option value="物流管理">物流管理</option>' +
'<option value="会计学">会计学</option>' +
'<option value="机械电子工程">机械电子工程</option>';

$("#s1").html(html);
}else if (course == "专科") {
var html = '<option value="none">请选择</option>';
html += '<option value="工商企业管理">工商企业管理</option>' +
'<option value="行政管理">行政管理</option>' +
'<option value="财务会计">财务会计</option>' +
'<option value="机电一体化（PLC方向）">机电一体化（PLC方向）</option>' +
'<option value="物流管理">物流管理</option>' +
'<option value="计算机实用技术">计算机实用技术</option>' +
'<option value="商务英语">商务英语</option>' +
'<option value="商务管理">商务管理</option>';

$("#s1").html(html);
}
}

这样点击就会正常了：