jquery操作select 的一些位置问题。

悬赏园豆：20 [已关闭问题]

并排列的3个select，用来显示省市区。

利用jquery的append("option")这样的形式来添加数据，实现联动，数据是利用每次选择后，异步读取出来的。

问题是，数据可以正常添加，联动也可以实现，不过在IE6，7里面出现了位置问题。就是原来填充数据以后select的宽度会发生变化，但是并不会自动扩展位置，也就一部分内容被挡住了。不知道怎么解决了。

大家帮忙看看。

网站开发 Javascript

迷路中的路人甲 | 初学一级 | 园豆：93
提问于：2009-11-23 08:59

< >

其他回答(2)

我也遇到过你这个问题，不过我真没在意

直接用dom操作确实没这个问题，我当初是把jquery改成dom操作select解决的

如果jquery可以直接解决，铜球高人明示

test9119 | 园豆：113 (初学一级) | 2009-11-23 09:11

呵呵。现在放在3行显示不同select，感觉太不好了。

支持(0) 反对(0) 迷路中的路人甲 | 园豆：93 (初学一级) | 2009-11-23 09:18

这个我想知道你每次在append前是否做过对象元素clear，如果没做过建议你clear下，我遇到过类似的，但未做深入的去看jQuery源代码，我只是遇到这个问题的时候我会每次加一行代码让append的对象innerHTML为空后再继续append

西越泽 | 园豆：10775 (专家六级) | 2009-11-23 11:08

省市区的联动，我刚做了一个。

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="FanXueFei.Web.c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
        //load 省的数据。
            var v = RegName.GetP().value;
            
            for (var i = 0; i < v.Tables[0].Rows.length; i++) {
                var txt = v.Tables[0].Rows[i].code;
                var val = v.Tables[0].Rows[i].name;
                $("#DorpPrivince").append("<option value=" + txt + ">" + val + "</option>");

            }
        });
        function Conn_City() {
            //市的数据。
            para = $('#DorpPrivince option:selected').attr("value");
            var v = RegName.GetC(para).value;
            $("#DropCity").empty();
            $("#DropRegion").empty(); 
            for (var i = 0; i < v.Tables[0].Rows.length; i++) {
                var txt = v.Tables[0].Rows[i].code;
                var val = v.Tables[0].Rows[i].name;
                $("#DropCity").append("<option value=" + txt + ">" + val + "</option>");
            }
        }

        function Conn_Region() {
            //区域的数据。
            para = $('#DropCity option:selected').attr("value");
            var v = RegName.GetA(para).value;
            $("#DropRegion").empty();
            for (var i = 0; i < v.Tables[0].Rows.length; i++) {
                var txt = v.Tables[0].Rows[i].code;    //这个地方需要注意区分大小写
                var val = v.Tables[0].Rows[i].name;  //跟dataset表的列名称要一致
                $("#DropRegion").append("<option value=" + txt + ">" + val + "</option>");
            }
        }
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        省份：
        <select id="DorpPrivince" onclick="Conn_City()">
        </select>
        城市：
        <select id="DropCity" onclick="Conn_Region()">
        </select>
        区域：
        <select id="DropRegion">
        </select>
    </div>
    </form>
</body>
</html>

后台采用

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace FanXueFei.Web
{
    [AjaxPro.AjaxNamespace("RegName")]
    public partial class c : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //注册本页为AJAX
            AjaxPro.Utility.RegisterTypeForAjax(typeof(FanXueFei.Web.c));
        }
        /// <summary>
        /// 获得省份
        /// </summary>
        /// <returns></returns>
        [AjaxPro.AjaxMethod]
        public DataSet GetP()
        {
            FanXueFei.BLL.Area area = new FanXueFei.BLL.Area();
            return area.GetProviceList();
        }
        /// <summary>
        /// 获得市的数据
        /// </summary>
        /// <param name="strWhere"></param>
        /// <returns></returns>
        [AjaxPro.AjaxMethod]
        public DataSet GetC(string strWhere)
        {
            FanXueFei.BLL.Area area = new FanXueFei.BLL.Area();
            return area.GetCityList(strWhere);
        }
        /// <summary>
        /// 获得区的数据
        /// </summary>
        /// <param name="strWhere"></param>
        /// <returns></returns>
        [AjaxPro.AjaxMethod]
        public DataSet GetA(string strWhere)
        {
            FanXueFei.BLL.Area area = new FanXueFei.BLL.Area();
            return area.GetAreaList(strWhere);
        }
    }
}

希望对你有作用。

amityat | 园豆：476 (菜鸟二级) | 2009-11-27 14:53

<div> 省份： <select id="DorpPrivince" onclick="Conn_City()" style="width:200px"> </select> 城市： <select id="DropCity" onclick="Conn_Region()"style="width:200px"> </select> 区域： <select id="DropRegion" style="width:200px"> </select> </div> 在ie 7下会有点宽度问题，可以加个stylw="width:**">

支持(0) 反对(0) amityat | 园豆：476 (菜鸟二级) | 2009-11-27 14:58

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

jquery操作select 的一些位置问题。

欢迎，请先登录或者注册。