首页 新闻 会员 周边

关于如何在文本框上实现学校选择!

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

现在我有一个项目,需要实现如图功能,当我要填写学校时,自动弹图本模拟对话框,让用户选择学校,想知道,这个是如何实现的,我想用JQ来实现,但我想知道,这些数据如何得到!?

Leo.zhou的主页 Leo.zhou | 初学一级 | 园豆:185
提问于:2010-01-13 10:06
< >
分享
其他回答(3)
0

Ajax 弹窗插件就可以了啊

齐.net | 园豆:1421 (小虾三级) | 2010-01-13 10:23
我知道弹出窗口如何实现,我需要的是,哪些学校的数据从哪里来,难道要我一个一个的添加吗?不可能撒!
支持(0) 反对(0) Leo.zhou | 园豆:185 (初学一级) | 2010-01-13 10:26
@Leo.zhou:网上可以找到现成的数据吧,我有一个数据库里面就有,不过服务器现在联不上。你可以先自己找下。 或者下个有这功能的程序源码,在数据库里取出来就可以了。
支持(0) 反对(0) 齐.net | 园豆:1421 (小虾三级) | 2010-01-13 10:28
你能帮我找一个、我就是在G上找了N久也没找到源码!
支持(0) 反对(0) Leo.zhou | 园豆:185 (初学一级) | 2010-01-13 10:30
@Leo.zhou: 你网上去找 02_Install initial Data.sql 这个Sql里有你要的数据
支持(0) 反对(0) 齐.net | 园豆:1421 (小虾三级) | 2010-01-13 11:24
0

jquery ui组件里有dailog控件,数据当然是从数据库里读出来的。

风海迷沙 | 园豆:4453 (老鸟四级) | 2010-01-13 10:26
我知道、我想有没已经做好了的!比如WS这些!
支持(0) 反对(0) Leo.zhou | 园豆:185 (初学一级) | 2010-01-13 10:31
0

数据当然是一个一个添加了 怎么可能有不劳而获的事情 弄个excel导到数据库里 

李里 | 园豆:210 (菜鸟二级) | 2010-01-13 12:05
有没做好的比如WEBSERVICE这些。!
支持(0) 反对(0) Leo.zhou | 园豆:185 (初学一级) | 2010-01-13 13:22
0

--給你一個自定義的用戶控件

jquery.js.

--前臺

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DropDownSelect.ascx.cs"
    Inherits="DropDownSelect" %>
<style type="text/css">
   
.x-combo-list-item {
    padding:2px;
    border:1px solid;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    border-color:#fff;
    cursor:pointer;
}
.dropList-item
{
    padding:2px;
    border:1px solid;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    border-color:#fff;
    cursor:pointer;
}
.x-shadow {
    display: none;
    position: absolute;
    overflow: hidden;
    left:0;
    top:0;
}
.x-shadow * {
    overflow: hidden;
}
.x-shadow * {
    padding: 0;
    border: 0;
    margin: 0;
    clear: none;
    zoom: 1;
}
.x-shadow .xstc, .x-shadow .xsbc {
    height: 6px;
    float: left;
}
.x-shadow .xstl, .x-shadow .xstr, .x-shadow .xsbl, .x-shadow .xsbr {
    width: 6px;
    height: 6px;
    float: left;
}


.x-shadow .xsc {
    width: 100%;
}

.x-shadow .xsml, .x-shadow .xsmr {
    width: 6px;
    float: left;
    height: 100%;
}

.x-shadow .xsmc {
    float: left;
    height: 100%;
    background: transparent;
}

.x-shadow .xst, .x-shadow .xsb {
    height: 6px;
    overflow: hidden;
    width: 100%;
}

.x-shadow .xsml {
    background: transparent repeat-y 0 0;
}

.x-shadow .xsmr {
    background: transparent repeat-y -6px 0;
}

.x-shadow .xstl {
    background: transparent no-repeat 0 0;
}

.x-shadow .xstc {
    background: transparent repeat-x 0 -30px;
}

.x-shadow .xstr {
    background: transparent repeat-x 0 -18px;
}

.x-shadow .xsbl {
    background: transparent no-repeat 0 -12px;
}

.x-shadow .xsbc {
    background: transparent repeat-x 0 -36px;
}

.x-shadow .xsbr {
    background: transparent repeat-x 0 -6px;
}
.x-shadow .xsmc {
    background-image: url(images/shadow-c.png);
}
.x-shadow .xsml, .x-shadow .xsmr {
    background-image: url(images/shadow-lr.png);
}
.x-shadow .xstl, .x-shadow .xstc,  .x-shadow .xstr, .x-shadow .xsbl, .x-shadow .xsbc, .x-shadow .xsbr{
    background-image: url(images/shadow.png);
}
.checkbox
{
  background-image: url(images/unchecked.gif) ;  background-repeat:no-repeat; border:1px solid green;  border:0px;  background-position:top 0;
}
    </style>

<script language="javascript" type="text/javascript">
     var <%=drowdownCheckList.ClientID %>isShow='N';
     $(document.body).ready(function()
     {
        <%=drowdownCheckList.ClientID %>PageInint();
        $(document).click(function(event)
        {
           <%=drowdownCheckList.ClientID %>PageClick(event);
        });
        $("#<%=drowdownCheckList.ClientID%>").find("img").click(function()
        {
          if (<%=drowdownCheckList.ClientID %>isShow=='N')
          {
            $("#<%=checkItemList.ClientID%>").show();
            $("#<%=shadow.ClientID %>").show();
            <%=drowdownCheckList.ClientID %>isShow='Y';
          }
          else
          {
            $("#<%=checkItemList.ClientID%>").hide();
            $("#<%=shadow.ClientID %>").hide();
            <%=drowdownCheckList.ClientID %>isShow='N';
          }
        });
        $("#<%=showSELECTVAL.ClientID%>").click(function()
        {
          if (<%=drowdownCheckList.ClientID %>isShow=='N')
          {
            $("#<%=checkItemList.ClientID%>").show();
            $("#<%=shadow.ClientID %>").show();
            <%=drowdownCheckList.ClientID %>isShow='Y';
          }
          else
          {
            $("#<%=checkItemList.ClientID%>").hide();
            $("#<%=shadow.ClientID %>").hide();
            <%=drowdownCheckList.ClientID %>isShow='N';
          }
        });
         $("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").hover(function()
        {
          $(this).css({"background-color":"#dfe8f6",border:"1px dashed #7EADD9"});
        },function()
        {
          $(this).css({"background-color":"#ffffff",border:"1px solid #fff"});
        });
        $("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("input[type=checkbox]").click(function()
        {
         
          var newVal=null;
          var labVal=null;
          var ckIdval=null;
          $("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("input[type=checkbox][checked]").each(function()
          {
            var val=$(this).val();
            var id=$(this).attr("id");
            var lab=$.trim($("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("label[for="+id+"]").html());
            if(newVal==null)
            {
              newVal="'"+val+"'";
              labVal= lab;
              ckIdval=id;
            }
            else
            {
              newVal="'"+val+"',"+newVal;
              labVal=lab+","+labVal;
              ckIdval=id+","+ckIdval;
            }
           
          });
          if(newVal!=null)
          {
             $("#<%=hiddenval.ClientID%>").val(newVal);
             $("#<%=showSELECTVAL.ClientID %>").val(labVal);
             $("#<%=hiddenchid.ClientID %>").val(ckIdval);
          }
          else
          {
             $("#<%=hiddenval.ClientID%>").val("");
             $("#<%=showSELECTVAL.ClientID %>").val("");
             $("#<%=hiddenchid.ClientID %>").val("");
          }
        });
      
     });
     function <%=drowdownCheckList.ClientID %>PageInint()
     {
        var val=$("#<%=hiddenchid.ClientID %>").val();
        if(val!="")
        {
          var properties= val.split(",");
          for(i=0;i<properties.length;i++)
          {
            var id= properties[i];
            $("#"+id).attr("checked","checked");
          }
        }
       
     }
     function <%=drowdownCheckList.ClientID %>PageClick(event)
     {
          var mLeft=$("#<%=drowdownCheckList.ClientID%>").offset().left;
           var mTop=$("#<%=drowdownCheckList.ClientID%>").offset().top;
           var mWidth=$("#<%=drowdownCheckList.ClientID%>").width();
           var mHeight=$("#<%=drowdownCheckList.ClientID%>").attr("ahei");
           mHeight=parseFloat(mHeight);
           var bodyScrollTop= document.documentElement.scrollTop || document.body.scrollTop;
           var bodyScrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
           bodyScrollTop=event.clientY+bodyScrollTop;
           bodyScrollLeft=event.clientX+bodyScrollLeft;
           var lLeft=mLeft+mWidth;
           var lTop=mTop+mHeight+20;
           if(!(bodyScrollTop>=mTop && bodyScrollTop<=lTop && bodyScrollLeft>=mLeft && bodyScrollLeft<=lLeft) && <%=drowdownCheckList.ClientID %>isShow=='Y')
           {
              $("#<%=checkItemList.ClientID%>").hide();
              $("#<%=shadow.ClientID %>").hide();
              <%=drowdownCheckList.ClientID %>isShow='N';
           }
     }


</script>

<div id='drowdownCheckList' runat="server" style="margin: 0px; padding: 0px; white-space: nowrap;
    word-spacing: normal;">
    <input type="text" id="showSELECTVAL" runat="server" style="background-color: #fff;
        border: 1px solid #7eadd9; white-space: pre-line; line-height: 18px; vertical-align: middle;
        height: 17px; margin-bottom: 1px; padding-top: 2px; background-image: url(images/text-bg.gif);
        padding-bottom: 0px; padding-left: 3px; padding-right: 3px; background-repeat: repeat-x;
        font-family: Arial;" /><img style="white-space: pre-line; width: 17px; position: absolute; border-bottom: 1px solid #7eadd9;
        background-position: -51px 0px; cursor: pointer; height: 20px; top: 0px; background-image: url(images/trigger.gif);"
        src="Images/s.gif" alt='' />
    <input type="hidden" id="hiddenval" runat="server" style="display: none" />
    <input type="hidden" id="hiddenchid" runat="server" style="display: none" />
    <div style="z-index: 10999; display: block; margin-top: 26px; display: none; margin-left: -4px;"
        class="x-shadow" runat="server" id="shadow">
        <div class="xst">
            <div class="xstl">
            </div>
            <div style="width: <%=(Width-12)%>px;" class="xstc">
            </div>
            <div class="xstr">
            </div>
        </div>
        <div style="height: <%=Height-12%>px;" class="xsc">
            <div class="xsml">
            </div>
            <div style="width: <%=(Width-12)%>px;" class="xsmc">
            </div>
            <div class="xsmr">
            </div>
        </div>
        <div class="xsb">
            <div class="xsbl">
            </div>
            <div style="width: <%=(Width-12)%>px;" class="xsbc">
            </div>
            <div class="xsbr">
            </div>
        </div>
    </div>
    <div style="z-index: 11000; margin-left: 0px; font-size: 12px; border: 1px solid #98c0f4;
        font-family: Arial; display: none; position: absolute; top: 22px; left: 0px;"
        id="checkItemList" runat="server">
        <div style="overflow: auto; background: white;" class="x-combo-list-inner" runat="server"
            id="ck_content">
            <div class="dropList-item">
                <input type="checkbox" value="1" id="drowdownCheckList_ck1" />
                <label for="drowdownCheckList_ck1">
                    Test1</label></div>
            <div class="dropList-item">
                <input type="checkbox" value="2" id="drowdownCheckList_ck2" />
                <label for="drowdownCheckList_ck2">
                    Test2</label></div>
            <div class="dropList-item">
                <input type="checkbox" value="3" id="drowdownCheckList_ck3" /><label for="drowdownCheckList_ck3">
                    Test3</label></div>
            <div class="dropList-item">
                <input type="checkbox" value="4" id="drowdownCheckList_ck4" /><label for="drowdownCheckList_ck4">
                    Test4</label></div>
            <div class="dropList-item">
                <input type="checkbox" value="5" id="drowdownCheckList_ck5" /><label for="drowdownCheckList_ck5">
                    Test5</label></div>
            <div class="dropList-item">
                <input type="checkbox" value="6" id="drowdownCheckList_ck6" /><label for="drowdownCheckList_ck6">
                    Test6</label></div>
            <div class="dropList-item">
                <input type="checkbox" value="7" id="drowdownCheckList_ck7" /><label for="drowdownCheckList_ck7">
                    Test7</label></div>
        </div>
    </div>
</div>

 

 

---後臺

 

 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class DropDownSelect : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Page.ClientScript.RegisterClientScriptInclude("JQUERY", "JS/jquery-1.3.2.min.js");
        if (!IsPostBack)
        {
            Response.Write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
            drowdownCheckList.Style.Add("width", Width.ToString() + "px");
            drowdownCheckList.Style.Add("position", position.ToString());
            drowdownCheckList.Style.Add("left", Left.ToString() + "px");
            drowdownCheckList.Style.Add("top", Top.ToString() + "px");
            drowdownCheckList.Attributes.Add("ahei", Height.ToString());

            showSELECTVAL.Style.Add("width", (Width - 33).ToString() + "px");
            shadow.Style.Add("width", Width.ToString() + "px");
            shadow.Style.Add("height", Height.ToString() + "px");
            checkItemList.Style.Add("Width", (Width - 10).ToString() + "px");
            checkItemList.Style.Add("height", (Height - 2).ToString() + "px");
            ck_content.Style.Add("height", (Height - 2).ToString() + "px");
            ck_content.Style.Add("width", (Width - 10).ToString() + "px");
            if (Items.Count > 0)
            {
                int i = 0;
                ck_content.InnerHtml = "";
                foreach (ListItem li in Items)
                {
                    i++;
                    ck_content.InnerHtml = ck_content.InnerHtml + "  <div class=\"dropList-item\"> <input type=\"checkbox\" value=\"" + li.Value + "\" id=\"" + this.ClientID + "drowdownCheckList_ck" + i.ToString() + "\" /><label for=\"" + this.ClientID + "drowdownCheckList_ck" + i.ToString() + "\"> " + li.Text + "</label></div>";
                }
            }
        }
    }
    private ListItemCollection listCollection = new ListItemCollection();
    /// <summary>
    ///
    /// 內容值
    /// </summary>
    public ListItemCollection Items
    {
        get { return listCollection; }
        set { listCollection = value; }
    }
    /// <summary>
    /// 選擇值
    /// </summary>
    public string SelectValue
    {
        get { return hiddenval.Value; }
    }
    private int _width = 110;
    private int _height = 200;
    private Position _position = Position.Relative;
    private int _top = 0;
    private int _left = 0;
    /// <summary>
    /// 寬度
    /// </summary>
    public int Width
    {
        get { return _width; }
        set { _width = value; }
    }
    /// <summary>
    /// 高度
    /// </summary>
    public int Height
    {
        get { return _height; }
        set { _height = value; }
    }
    /// <summary>
    /// 位置
    /// </summary>
    public Position position
    {
        get { return _position; }
        set { _position = value; }
    }
    /// <summary>
    /// Top
    /// </summary>
    public int Top
    {
        get { return _top; }
        set { _top = value; }
    }
    /// <summary>
    /// Left
    /// </summary>
    public int Left
    {
        get { return _left; }
        set { _left = value; }
    }
    public enum Position
    {
        Relative,
        Absolute,
        Fixed
    }
}

woody.wu | 园豆:3621 (老鸟四级) | 2010-01-13 12:08
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册