js - 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="本科" οnclick="courseSel('本科')">本科</option>
                        <option value="专科" οnclick="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);
	}
}

这样点击就会正常了：