IE浏览器select属性onchange遇到的坑

Posted 2020-10-20 Programming is an art

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IE浏览器select属性onchange遇到的坑相关的知识，希望对你有一定的参考价值。

在网页头部定义js代码


<script type="text/javascript">
 function gradeChange(e){
            var selectId = document.getElementById("selectId");
            var index = selectId.selectedIndex; 
            var value = selectId.options[index].value;
            var id = selectId.options[index].id;
            document.getElementById(id).setAttribute(‘disabled‘,‘disabled‘);
            var ul = document.getElementById("ul");
            var li = document.createElement("li");
            li.setAttribute(‘id‘,‘li_‘+id);
            li.setAttribute(‘onclick‘,‘del(‘+id+‘)‘);
            var span = document.createElement("span");
            span.innerhtml =value+‘×‘;
            li.appendChild(span);
            ul.appendChild(li);
            selectId[0].selected = true;
            var hide = document.getElementById("hotTagName");
            if(hide.value==‘‘ || hide.value=="null"){
                hide.setAttribute(‘value‘,value);
            }else{
                hide.setAttribute(‘value‘,hide.value+‘,‘+value);
            }
        }
 </script>

<body> 
 <select style="float:left;" id="selectId"  onchange="javascript:gradeChange(this);">
                <option value="">--热点标签--</option>
                <logic:notEmpty name="tagList">
                    <logic:iterate id="tag" name="tagList" indexId="i">
                    <option  id="id_${i}" value ="${tag.name}">${tag.name}</option>
                    </logic:iterate>
                </logic:notEmpty>
               </select>
<body>

IE、360报错gradeChange方法未定义，不兼容问题谷歌、火狐正常。

经过考虑之后把代码定义在 <BODY>里，打开页面默认加载js方法

全部兼容了

<body>
<select style="float:left;" id="selectId"  onchange="javascript:gradeChange(this);">
                <option value="">--热点标签--</option>
                <logic:notEmpty name="tagList">
                    <logic:iterate id="tag" name="tagList" indexId="i">
                    <option  id="id_${i}" value ="${tag.name}">${tag.name}</option>
                    </logic:iterate>
                </logic:notEmpty>
               </select>
<script>
 function gradeChange(e){
            var selectId = document.getElementById("selectId");
            var index = selectId.selectedIndex; 
            var value = selectId.options[index].value;
            var id = selectId.options[index].id;
            document.getElementById(id).setAttribute(‘disabled‘,‘disabled‘);
            var ul = document.getElementById("ul");
            var li = document.createElement("li");
            li.setAttribute(‘id‘,‘li_‘+id);
            li.setAttribute(‘onclick‘,‘del(‘+id+‘)‘);
            var span = document.createElement("span");
            span.innerHTML =value+‘×‘;
            li.appendChild(span);
            ul.appendChild(li);
            selectId[0].selected = true;
            var hide = document.getElementById("hotTagName");
            if(hide.value==‘‘ || hide.value=="null"){
                hide.setAttribute(‘value‘,","+value);
            }else{
                hide.setAttribute(‘value‘,hide.value+‘,‘+value);
            }
        }
 </script>
</body>

以上是关于IE浏览器select属性onchange遇到的坑的主要内容，如果未能解决你的问题，请参考以下文章

webpack自动打包onchange遇到的坑

Select2 字段 .value 属性不会在 .onchange 函数内更改