HTML select标签+js避免使用onclick事件,选用onchange=“xxx(this.value)”可兼容谷歌内核的浏览器

在我使用pbootCMS开发过程中遇到过这样的问题,明明在非google内核的浏览器中使用onclick内联可以正常执行代码,但是谷歌内核的浏览器禁止了此方法,没办法,只能通过onchange来实现

此方法用于多条件筛选,具体方法如下

<div>
    <select name="[select:name]" data-name="ext_dianya" onchange="goto(this.value)">
        <option value="reset">重置</option>
        {pboot:select field=ext_dianya}
        <option value="[select:link]" {pboot:if('[select:value]'=='[select:current]')} selected {/pboot:if}>[select:value1]</option>
        {/pboot:select}
    </select>
</div>
<div>
    <select name="[select:name]" data-name="ext_product_agreement" onchange="goto(this.value)">
        <option value="reset">重置</option>
        {pboot:select field=ext_product_agreement}
        <option value="[select:link]" {pboot:if('[select:value]'=='[select:current]')} selected {/pboot:if}>[select:value1]</option>
        {/pboot:select}
    </select>
</div>

<script>
    function goto(url){
        if(url == "reset"){
            reset();
        }else{
            window.location.href=url;
        }
    }
    var thisUrl = window.location.search;//获取当前url搜索部分的字符串
    thisUrl = decodeURI(thisUrl,"UTF-8");//转换字符串编码

    //封装获取URL参数方法
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = thisUrl.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    //当前select点击事件
    function reset(){
        //遍历所有的select
        $(".pages select").each(function(){
            $selected = $(this).find('option:selected').val();//获取当前选中的值
            $dataName = $(this).attr('data-name');//获取当前select所要查询数据库的表名
            $resetValue = getUrlParam($dataName);//通过封装的获取URL参数的方法得到需要的参数
            //判断当前选中的值是否为重置,如果是,将当前的url参数与值过滤赋值给新的URL
            if($selected == 'reset'){
                thisUrl = thisUrl.replace($dataName+'='+$resetValue,'');
                thisUrl = thisUrl.replace('&','');
                window.location.href=thisUrl;
            }
        });
    }
    
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容