select中option的onclick事件失效

html:

<select id="pageSelect">

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

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

</seelct>

js:

<script type="text/javascript">

function openNewPage(){

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

  if(value == "1"){

    //弹出页面1

扫描二维码关注公众号,回复: 72622 查看本文章

  }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

猜你喜欢

转载自www.cnblogs.com/Bud-blog/p/8954144.html
今日推荐