select中option的onclick事件失效

html：

<select id="pageSelect">

　　<option value="1" selected onclick="openNewPage()">页面1</option>

　　<option value="2" onclick="openNewPage()">页面2</option>

</select>

 

js:

<script type="text/javascript">

function openNewPage(){

　　var value = $("# pageSelect option:select").value;

　　if(value == "1"){

　　　　//弹出页面1

　　}else{

　　　　//弹出页面2

　　}

}

</script>

 

以上，在高版本浏览器可以正常运行，但是在低版本浏览器，option的onclick事件无效，因为低版本浏览器不支持option的onclick事件

解决方法：

可以在select添加onclick事件，不采用onchange事件，是因为选项内容值必须改变，才能触发onchange事件；

但是，在select中添加onclick事件，会导致你点击这个选择框还没选择选项时，就会触发onclick事件，所以，添加onclick事件后，在js中也要进行处理

html：

<select id="pageSelect"  onclick="openNewPage(this)">

　　<option value="1" selected>页面1</option>

　　<option value="2">页面2</option>

</seelct>

 

js:

<script type="text/javascript">

//定义一个布尔类型变量，用于控制选择框的点击事件

var isSelect=true;

function openNewPage(value){

　　var optionSelect= value.options[value.selectedIndex];

　　if(value.value == optionSelect.value){

　　　　isSelect = !isSelect

　　} else {

　　　　isSelect = true;

　　}

　　if(isSelect == true){

　　　　if(value == "1"){

　　　　　　//弹出页面1

　　　　}else{

　　　　　　//弹出页面2

　　　　}

　　}

}

</script>

 

参考网址：

https://blog.csdn.net/svtme/article/details/5149544