jquery操作下拉框(select)的一些说明

公司网站目前的访问用户中使用IE6.0的站50%以上,所以必需兼容IE6.0,使用jquery在IE6.0中设置下拉框时会有以下一些问题

//==========测试代码===============

<head runat="server">
    <title>下拉框测试</title>
    <script type="text/javascript" src="/js/jquery/jquery-1.3.js"></script>
    <script type="text/javascript">
    $(function(){

       var $city= $("#ddlCity");
       //填充一些数据
       for(var i=1;i<=10;i++){
        $city.append($("<option/>").attr("value",i).text("可以选择的城市第:" +i));
       }

       //$city.width("100px");//IE6.0下需要自己调整下拉框的宽度
       var t=6;
       //setTimeout("$(\"#ddlCity\").val("+ t +");",1); //IE6下解决一,IE,火狐取值多有问题
       try{$city.val(6);}catch(e){} //IE6下解决二,select至少有一个静态option,IE取值有问题
       //$city.val(6);//ie6报错,fireFox,IE8.0正常
       alert($city.val());
       $("#ddlProvince").val(101);//全部正常
     });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <select id="ddlProvince" name="ddlProvince">
        <option value="0">请选择</option>
        <option value="1">北京</option>
        <option value="60">重庆</option>
        <option value="101">广东</option>
    </select>
    <select id="ddlCity" name="ddlCity">
      <option value="0">请选择</option>
    </select>
     
    <asp:Button ID="butSave" runat="server" οnclick="butSave_Click" Text="Button" />
    </form>
</body>

//==========End 测试代码===================

测试说明:

A:静态select项目

静态select项目(可以通过服务器端脚本填充),可以直接使用$("#下拉框id").val(选中的value)进行设置.

设置后使用$("#下拉框id").val();可以正确获取其值.

B:有一项静态的

包含动态创建立的option时,使用$("#selectId").val()

动态创建的(包含一项静态的option如: <option value="0">请选择</option>),可以通过

1.setTimeout("$(\"#下拉框id\").val("+value+")",1)设置.

但是使用setTimeout后,使用$("#下拉框id").val();取值时则不正确,当然通常情况你的代码上下文保留有value值,

没必要通过.val()去取,setTimeout缺点是异步执行的,setTimeout执行时的上下文通常不是当前函数域.

2.使用try{$("#下拉框id").val();}catch(e){}来屏蔽错误,

这个在firefox中跟IE6.0中多可以正常运行,但是IE6.0取值会出问题.

C:全部动态创建

这种情况下使用try在IE6.0中也无发设置.

另外IE6.0对动态创建的下拉项目,不能自动调整select宽度,需要手动调整.

转载于:https://www.cnblogs.com/wdfrog/archive/2010/04/01/1702382.html

jquery操作下拉框(select)的一些说明相关推荐

JQuery操作下拉框
要实现这种效果: HTML: <script src="js/jquery-1.7.2.min.js"></script> <table>< ...
jQuery对下拉框Select操作总结
2019独角兽企业重金招聘Python工程师标准>>> jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").c ...
JQuery实现下拉框Select选项的左右移动
某网站的一个后台界面,在"负责频道"这个区域,用户可以通过按钮将左边选中的选项添加到右边,也可以将右边的选项添加到左边,或者双击选项,将其添加给对方.执行结果如下图: (1)页面代 ...
级联查询ajax,Jquery+Ajax下拉框级联查询
Jquery代码 $(function(){ //提交事件 $("#ImageButton1").click(function(){ //省Id var provinceId=$( ...
jquery对下拉框的操作
<script type="text/javascript"></script> jQuery对下拉框的操作 /获取第一个option的值 $('#test ...
jQuery模拟下拉框单选框复选Select，Checkbox，Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们: 如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&q ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
jQuery对下拉框、单选框、多选框的处理
下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]&quo ...
html下拉框变长,改变HTML下拉框SELECT选项的多种方法
原标题:改变HTML下拉框SELECT选项的多种方法提交表单后返回的HTML页面重新渲染,SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态. 复制代码 ...

jquery操作下拉框(select)的一些说明

jquery操作下拉框(select)的一些说明相关推荐

最新文章

热门文章