Jquery获取select option动态添加自定义属性值失效

最新推荐文章于 2023-02-02 15:51:26 发布

weixin_34388207

最新推荐文章于 2023-02-02 15:51:26 发布

阅读量430

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jcz1206/p/4243033.html

本文探讨了使用JQuery与纯JS为Select元素动态添加自定义属性时遇到的浏览器兼容性问题，特别是在IE9及新型浏览器中的表现差异，并提供了解决方案。

Jquery获取select option动态添加自定义属性值失效

2014/12/31 11:49:19 中国学网转载编辑：李强

http://www.xue163.com/588880/39096/390963333.html

为了帮助网友解决“Jquery获取select optio”相关的问题，中国学网通过互联网对“Jquery获取select optio”相关的解决方案进行了整理,用户详细问题包括:jqueryselectie9  function GetFenceItemData(type) {
            var selObj = document.getElementById("fence");
            selObj.options.length = 0;
            var arr = new Array();
            for (var i = 0; i < fencelist.length(); i++) {
                if (fencelist.elements[i].value.o_fencetype == type) {
                    arr.push(fencelist.elements[i].value);
                }
            }
            if (arr.length > 0) {
                for (var i = 0; i < arr.length; i++) {
                    var option = new Option(arr[i].o_fencename,arr[i].o_fenceid);
                    option.radius = arr[i].o_radius;
                    selObj.options.add(option);
                }
            }
        }
向ID为fence的select中添加option以及自定义属性
var fence = $("#fence option:selected");
var radius = fence.attr("radius");
  alert(radius);
获取ID为fence的select当前选中项的自定义属性radius的值
在IE8有用，在IE9，新型浏览器失效，提示Undefine,这是为什么？
，具体解决方案如下：

解决方案1：
var radius = fence.attr("radius"); 这句是获取属性radius吧, 你还没添加就去获取肯定undefined

添加自定义的应该是 fence.attr("radius"，"str");

解决方案2：
参考

<select id="s"></select>
<script src="http://www.wosoni.com/www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script>
  var d=$('#s');
  for(var i=0;i<5;i++)d.append('<option radius="'+i+'">'+i+'</option>')
</script>
<input type="button" value="get" onclick="alert($('#s option:selected').attr('radius'))"/>

解决方案3：

引用 1 楼 Ragin 的回复:

var radius = fence.attr("radius"); 这句是获取属性radius吧, 你还没添加就去获取肯定undefined

添加自定义的应该是 fence.attr("radius"，"str");

var option = new Option(arr[i].o_fencename,arr[i].o_fenceid);
option.radius = arr[i].o_radius;
selObj.options.add(option);
是添加了自定义属性，再去获取的，IE8有效，IE9失效

解决方案4：
设置的时候这样：

option.setAttribute('radius',arr[i].o_radius) ;

解决方案5：
用jquery添加。原生JS添加option自定义属性不好用

解决方案6：
问题解决了，分享给大家吧....
我之前是用JS为Select动态添加自定义属性的，然后用Jquery获取Select选中项的自定义属性值，在IE8有效，在IE9失效;
在网上找了很多方法，也没有解决，后来尝试用Jquery为Select动态添加自定义属性,用Jquery获取Select选中项的自定义属性值,
经测试IE9，新型浏览器，都有效，由此得出，Jquery和JS在某些方面，存在不兼容，如果要为Select动态添加自定义属性，要么都用JS，要么都用Jquery，可以减少不必要的麻烦！

转载于:https://www.cnblogs.com/jcz1206/p/4243033.html