JS模拟showModalDialog弹窗选择值

来源:互联网 发布:淘宝上的晚礼服 编辑:程序博客网 时间:2024/06/07 13:51

1:客户端页面构建

数据呈现是js动态构建div来显示的 采用ajax方式加载

var Selector = {    CacheList: new Array(),    setCacheData: function(cacheName, cacheValue) {        this.CacheList.push({ CacheName: cacheName, CacheValue: cacheValue });    },    getCacheData: function(cacheName) {        for (var i = 0; i < this.CacheList.length; i++) {            if (this.CacheList[i].CacheName == cacheName) {                return this.CacheList[i].CacheValue;            }        }        return null;    },    Delete: function(index) {        if (index < 0 || index > this.CacheList.length) return;        this.CacheList.splice(index, 1);    },    removeCache: function(cacheName) {        for (var i = 0; i < this.CacheList.length; i++) {            if (this.CacheList[i].CacheName == cacheName) {                this.Delete(i);                break;            }        }    },    Width: function() { return Math.max(document.body.scrollWidth, document.body.offsetWidth) - (document.body.offsetWidth - document.body.scrollWidth); },    Height: function() { return Math.max(document.body.scrollHeight, document.body.offsetHeight); },    initialize: function(WindowOptions, QueryOptions, Controls) {        this.closeSelector();        var w = this.createWindow(WindowOptions);        this.createTitle(w, WindowOptions.TitleName);        this.createContent(w, QueryOptions);        this.setCacheData("AJaxControls", Controls); //传入控件集合 自动对控件赋值    },    closeSelector: function() {        var w = this.getCacheData("Selector");        if (w != null) {            document.body.removeChild(w);            this.removeCache("Selector");            this.removeCache("ajaxPagerInfo");        }    },    convertToJsonObject: function(jsonString) {        if (jsonString == "") return jsonString;        var fun = new Function("return " + jsonString + "");         return fun();    },    processRequest: function(data) {        data = Selector.convertToJsonObject(data);        if (data.Error) {            window.alert(data.Error);            return;        }        var c = Selector.getCacheData("Selector");        c = c.getElementsByTagName("div")[1];        c.innerHTML = "";        c.appendChild(Selector.createSelect(data.Keys)); //查詢條件        c.appendChild(Selector.createPageContent(data.PagerContent)); //顯示內容        c.appendChild(Selector.createSelectPager(parseInt(data.PageIndex), parseInt(data.PageCount), parseInt(data.TotalRecord))); //分頁    },    createWindow: function(Options) {        var w = document.createElement("div");        document.body.appendChild(w);        var width = (Options.Width || this.Width()), height = (Options.Height || this.Height()), top = Options.Top || 0, left = Options.Left || 0, bodyWidth = this.Width(), bodyHeight = this.Height(); ;        if (Options.SelectButton) {            var p = this.getPosition(Options.SelectButton);            top = p.Top;            left = p.Left;            if (Options.Width) {                if (parseInt(left) > bodyWidth / 2) {                    left = Math.abs(parseInt(left) - parseInt(Options.Width));                }                else {                    left = parseInt(left) + parseInt(Options.SelectButton.offsetWidth);                }            }            if (Options.Height) {                if (parseInt(top) > bodyHeight / 2) {                    if (parseInt(Options.Height) > bodyHeight) {                        top = 0;                    }                    else {                        top = Math.abs(parseInt(top) - parseInt(Options.Height)) + parseInt(Options.SelectButton.offsetHeight);                    }                }            }        }        w.style.cssText = "position:absolute;border:solid 1px #24B1EC;z-Index:2000;overflow:auto;background-color:#fff;width:" + width + "px;height:" + height + "px;top:" + top + "px;left:" + left + "px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);";        this.setCacheData("Selector", w);        return w;    },    createTitle: function(parenWindow, titleName) {        var t = document.createElement("div"); //#3977B5        t.style.cssText = "width:100%;height:20px;background-color:#24B1EC;cursor:default";        var titleText = document.createElement("span");        titleText.style.cssText = "float:left;color:#fff;width:95%;cursor:move";        titleText.innerText = titleName;        titleText.onmousedown = function() {            Selector.drag(parenWindow);        }        var close = document.createElement("span");        close.style.cssText = "float:right;cursor:pointer;color:#fff";        close.innerHTML = "X";        close.title = "關閉";        close.onclick = function() {            Selector.closeSelector();        }        t.appendChild(titleText);        t.appendChild(close);        parenWindow.appendChild(t);    },    createContent: function(parenWindow, queryOptioins) {        var c = document.createElement("div");        c.style.cssText = "width:100%";        parenWindow.appendChild(c);        this.ajaxPager({ QueryOptions: queryOptioins }, this.processRequest);    },    createSelect: function(selectObject) {        var select = document.createElement("div");        var ddlSelectKeyWord = document.createElement("select");        var ajaxPagerInfo = this.getCacheData("ajaxPagerInfo");        for (var item in selectObject) {            var o = new Option(selectObject[item], item);            if (ajaxPagerInfo.QueryOptions.SearchKey) {                if (ajaxPagerInfo.QueryOptions.SearchKey == item) {                    o.selected = true;                }            }            ddlSelectKeyWord.options.add(o);        }        select.appendChild(ddlSelectKeyWord);        var txtKeyWord = document.createElement("input");        txtKeyWord.setAttribute("type", "text");        var btnSearch = document.createElement("input");        btnSearch.setAttribute("type", "button");        btnSearch.value = "查詢";        btnSearch.onclick = function() {                        var queryOptions = ajaxPagerInfo.QueryOptions;            var sk = ddlSelectKeyWord.value, sv = txtKeyWord.value;            if (sv != "") {                if (!queryOptions.SearchKey) {                    queryOptions.SearchKey = "";                }                if (!queryOptions.SearchValue) {                    queryOptions.SearchValue = "";                }                queryOptions.SearchKey = sk;                queryOptions.SearchValue = sv;                Selector.setCacheData("ajaxPagerInfo", ajaxPagerInfo);                Selector.goToPage(1, Selector.processRequest);            }        }        var btnSure = document.createElement("input");        btnSure.setAttribute("type", "button");        btnSure.value = "確定";        btnSure.onclick = function() {            var parenWindow = Selector.getCacheData("Selector");            var tb = parenWindow.getElementsByTagName("table")[0];            var ret = [], item, row;            for (var i = 1; i < tb.rows.length; i++) {                var chk = tb.rows[i].cells[0].firstChild.checked;                if (chk == true) {                    row = tb.rows[i];                    item = [];                    for (var j = 1; j < row.cells.length; j++) {                        item.push(row.cells[j].innerText);                    }                    ret.push(item);                }            }            if (ret.length > 0) {                var controls = Selector.getCacheData("AJaxControls");                if (controls != null) {                    for (var n = 0; n < controls.length; n++) {                        if (ret[n]) {                            Selector.setControlValue(controls[n], ret[n]);                        }                    }                }        
            }            Selector.closeSelector();        }        select.appendChild(txtKeyWord);        select.appendChild(btnSearch);        select.appendChild(btnSure);        return select;    },    createSelectPager: function(pageIndex, pageCount, totalRecord) {        var selectPage = document.createElement("div");        selectPage.style.cssText = "FONT-SIZE: 9pt;  WIDTH: 100%; COLOR: #3E94F1; TEXT-ALIGN: center;";        var m = "cursor:pointer;color:#fff;background-color:#3E94F1", o = "cursor:pointer;color:#3E94F1;background-color:#fff";        var first = document.createElement("span");        first.innerText = "首頁";        first.onmouseover = function() { first.style.cssText = m; }        first.onmouseout = function() { first.style.cssText = o; }        var previous = document.createElement("span");        previous.innerText = "上一页";        previous.onmouseover = function() { previous.style.cssText = m; }        previous.onmouseout = function() { previous.style.cssText = o; }        var next = document.createElement("span");        if (pageIndex > 1) {            first.onclick = function() { Selector.goToPage(1, Selector.processRequest); }            previous.onclick = function() { Selector.goToPage(pageIndex - 1, Selector.processRequest); }        }        next.innerText = "下一页";        next.onmouseover = function() { next.style.cssText = m; }        next.onmouseout = function() { next.style.cssText = o; }        var last = document.createElement("span");        last.innerText = "尾页";        last.onmouseover = function() { last.style.cssText = m; }        last.onmouseout = function() { last.style.cssText = o; }        if (pageIndex < pageCount) {            next.onclick = function() { Selector.goToPage(pageIndex + 1, Selector.processRequest); }            last.onclick = function() { Selector.goToPage(pageCount, Selector.processRequest); }        }        var total = document.createElement("span");        total.innerHTML = "當前第<font color=\"red\">" + pageIndex + "</font>頁共<font  color=\"red\">" + pageCount + "</font>頁<font color=\"red\">" + totalRecord + "</font>條數據";        selectPage.appendChild(first);        selectPage.appendChild(previous);        selectPage.appendChild(next);        selectPage.appendChild(last);        selectPage.appendChild(total);        return selectPage;    },    createPageContent: function(pagerContent) {        var tb = document.createElement("table");        tb.style.cssText = "width:100%;border-collapse:collapse";        tb.border = "1";        tb.cellPadding = "0";        tb.cellSpacing = "0";        var row = null, header, cell;        header = pagerContent[0];        row = tb.insertRow(0);        row.style.cssText = "color:#fff;background-color:#006699;font-weight:bold;font-size:10pt";        cell = row.insertCell();        var chkAll = document.createElement("input");        chkAll.setAttribute("type", "checkbox");        chkAll.onclick = function() {            Selector.selectAll(chkAll);        }        cell.appendChild(chkAll);        for (var h in header) {            cell = row.insertCell();            cell.innerText = h;        }        for (var i = 0; i < pagerContent.length; i++) {            row = tb.insertRow(i + 1);            cell = row.insertCell();            var chkSingle = document.createElement("input");            chkSingle.setAttribute("type", "checkbox");            chkSingle.onclick = function(i) { return function() { var el = this; el.style.backgroundColor = el.checked ? "red" : ""; } } (i)            cell.appendChild(chkSingle);            for (var column in pagerContent[i]) {                cell = row.insertCell();                cell.innerText = pagerContent[i][column];            }            row.onmouseover = function(i) { return function() { var el = this; el.style.backgroundColor = "#3E94F1"; } } (i);            row.onmouseout = function(i) { return function() { var el = this; el.style.backgroundColor = ""; } } (i);        }        return tb;    },    show: function(WindowOptions, QueryOptions, Controls) {        this.initialize(WindowOptions, QueryOptions, Controls);    },    drag: function(obj) {        obj.setCapture();        var OriginalPosition = { Top: (window.event.clientY - parseInt(obj.style.top)), Left: (window.event.clientX - parseInt(obj.style.left)) };        document.onmouseup = function() {            if (obj == null) { return; }            obj.releaseCapture();            obj = null;        }        document.onmousemove = function(e) {            if (obj == null) return;            if (!e) { e = event; }            obj.style.top = e.clientY - OriginalPosition.Top;            obj.style.left = e.clientX - OriginalPosition.Left;        }    },    getSelectIndex: function(select, selectValue) {        for (var j = 0; j < select.options.length; j++) {            if (select.options[j].value == selectValue) { return j; }        }        return 0;    },    getPosition: function(e) {  /*獲取元素的絕對位置*/        var left = 0, top = 0;        if (e.getBoundingClientRect) {            var pos = e.getBoundingClientRect();            left = pos.left + document.body.scrollLeft;            top = pos.top + document.body.scrollTop;            return { Left: left, Top: top }        }        else {            while (e.offsetParent) {                left += e.offsetLeft;                top += e.offsetTop;                e = e.offsetParent;            }            return { Left: left, Top: top }        }    },    setControlValue: function(controls, retVal) {        if (controls == null) return;        var sValue, ctrl;        for (var i = 0; i < controls.length; i++) {            ctrl = typeof controls[i] == "string" ? document.getElementById(controls[i]) : controls[i];            if (!ctrl) continue;            sValue = retVal[i] || "";            switch (ctrl.type) {                case "text":                    ctrl.value = sValue;                    break;                case "select-one":                    ctrl.selectedIndex = this.getSelectIndex(ctrl, sValue);                    break;                default:                    ctrl.innerText = sValue;                    break;            }        }    },    formatSql: function(sql) {        if (!sql) return "";        var item = [];        for (var s in sql) {            item.push(s + ":" + sql[s]);        }        return item.join(",");    },    selectAll: function(obj) {        var tb = obj.offsetParent.offsetParent;        for (var i = 1; i < tb.rows.length; i++) {            for (var j = 0; j < tb.rows[i].cells.length; j++) {                for (var k = 0; k < tb.rows[i].cells[j].childNodes.length; k++) {                    if (tb.rows[i].cells[j].childNodes[k].type == "checkbox") {                        tb.rows[i].cells[j].childNodes[k].checked = obj.checked;                    }                }            }        }    },    ajaxPager: function(Options, processRequest) {        this.setCacheData("ajaxPagerInfo", Options);        this.goToPage((Options.QueryOptions.PageIndex || "1"), processRequest);    },    goToPage: function(pageIndex, processRequest) {//debugger        var ajaxPagerInfo = this.getCacheData("ajaxPagerInfo");        var queryOptions = ajaxPagerInfo.QueryOptions        var queryWhere = this.formatSql(queryOptions.QueryWhere) || "", queryCode = queryOptions.QueryCode, pageSize = 10, orderBy = this.formatSql(queryOptions.OrderBy) || "", searchKey = queryOptions.SearchKey || "", searchValue = queryOptions.SearchValue || "";        var sendData = "QueryCode=" + queryCode + "&PageIndex=" + pageIndex + "&PageSize=" + pageSize + "&QueryWhere=" + queryWhere + "&OrderBy=" + orderBy + "&SearchKey=" + searchKey + "&SearchValue=" + searchValue + "";        var url = "Handler1.ashx?num=" + Math.random();        this.send("POST", url, sendData, true, processRequest);    },    getXmlHttp: function() {        var x = this.getCacheData("xmlHttp");        if (x == null) {            x = new ActiveXObject("Microsoft.XMLHTTP");            this.setCacheData("xmlHttp", x);        }        return x;    },    send: function(bstrMethod, bstrUrl, pdata, varAsync, processRequest) {        var xmlHttp = this.getXmlHttp();        xmlHttp.open(bstrMethod, bstrUrl, varAsync);        xmlHttp.onreadystatechange = function() {            if (xmlHttp.readyState == 4) {                if (xmlHttp.Status == 200) {                    processRequest(xmlHttp.responseText);                }                else {                    alert("error:" + xmlHttp.statusText);                }            }        }        if (bstrMethod == "POST") {            xmlHttp.setRequestHeader("Content-Length", pdata.length);            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            xmlHttp.setRequestHeader("Connection", "close");            xmlHttp.send(pdata);        }        else {            xmlHttp.send(null);        }    }}

2:服务端的数据处理

建立一个  Handler1.ashx

数据取自Sql2000 的NorthWind  分页用系统自带的分页存储过程

没有什么复杂的逻辑代码也很简单 就没有加注释

using System;using System.Web;using System.Data.SqlClient;using System.Data;using System.Text;namespace Selector{    /// <summary>    /// $codebehindclassname$ 的摘要描述    /// </summary>    public class DataBase    {        /*        分頁存儲過程            CREATE   procedure   Pro_SelectPage               @sqlstr   nvarchar(4000),             @currentpage   int,              @pagesize   int               as               set   nocount   on               declare   @P1   int,              @rowcount   int               set @sqlstr=replace(replace(replace(replace(replace(replace(replace(replace(@sqlstr,'exec ',''),'insert ',''),'delete ',''),'update ',''),'drop ',''),'alter ',''),'chr(',''),'mid(','')            exec   sp_cursoropen   @P1  output ,@sqlstr,@scrollopt=1,@ccopt=1,@rowcount=@rowcount   output               select   ceiling(1.0*@rowcount/@pagesize)   as   PageCount,@rowcount as RCount --,@rowcount   as   ?行?,@currentpage   as   ?前?               set   @currentpage=(@currentpage-1)*@pagesize+1               exec   sp_cursorfetch   @P1,16,@currentpage,@pagesize               exec   sp_cursorclose   @P1               set   nocount   off            GO         *          */        private SqlCommand cmd = null;        public DataBase() { cmd = new SqlCommand(); }        public void AddInParameter(string parameterName, object parameterValue, SqlDbType sqlDbType) {            SqlParameter parameter = new SqlParameter();            parameter.ParameterName = parameterName;            parameter.SqlDbType = sqlDbType;            parameter.Value = parameterValue;            parameter.Direction = ParameterDirection.Input;            cmd.Parameters.Add(parameter);        }        public System.Data.DataSet ExecuteDataSet(System.Data.CommandType commandType, string commandText) {            using (System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection("server=.;database=northwind;uid=sa;pwd=000000")) {                cmd.Connection = conn;                cmd.CommandType = commandType;                cmd.CommandText = commandText;                System.Data.SqlClient.SqlDataAdapter dapter = new System.Data.SqlClient.SqlDataAdapter(cmd);                System.Data.DataSet ds = new System.Data.DataSet();                dapter.Fill(ds);                return ds;            }        }    }    public class Common    {        DataBase db = new DataBase();        public DataSet GetPageData(int pageIndex, int pageSize, string commandText) {            db.AddInParameter("@sqlstr", commandText, SqlDbType.NVarChar);            db.AddInParameter("@currentpage", pageIndex, SqlDbType.Int);            db.AddInParameter("@pagesize", pageSize, SqlDbType.Int);            DataSet ds = db.ExecuteDataSet(CommandType.StoredProcedure, "Pro_SelectPage");            if (ds.Tables[2].Columns.Contains("rowstat")) {                ds.Tables[2].Columns.Remove("rowstat");            }            return ds;        }    }    public class Handler1 : IHttpHandler    {        private string ConvertToJson(System.Data.DataTable dt) {            System.Text.StringBuilder retVal = new System.Text.StringBuilder();            retVal.Append("[");            int RowCount = 0, ColumnCount = 0;            foreach (DataRow row in dt.Rows) {                RowCount++;                retVal.Append("{");                foreach (DataColumn column in dt.Columns) {                    ColumnCount++;                    retVal.AppendFormat("'{0}':'{1}'{2}", column.ColumnName, (row[column].ToString().Replace(System.Environment.NewLine,"\\r\\n").Replace("'","\\'").Replace("\"","\\\"")), ColumnCount == dt.Columns.Count ? "" : ",");                }                ColumnCount = 0;                retVal.Append("}");                retVal.AppendFormat("{0}", RowCount == dt.Rows.Count ? "" : ",");            }            retVal.Append("]");            return retVal.ToString();        }        private string ConvertToJson(DataSet ds) {            StringBuilder retVal = new StringBuilder();            int TableCount = 0;            foreach (DataTable dt in ds.Tables) {                TableCount++;                retVal.Append(dt.TableName + ":");                retVal.Append(ConvertToJson(dt));                retVal.Append(TableCount == ds.Tables.Count ? "" : ",");            }            if (retVal.Length > 0) {                retVal.Insert(0, "{");                retVal.Append("}");            }            return retVal.ToString();        }        private int PageIndex {            get { return this.Request.Form["PageIndex"] == null ? 1 : int.Parse(this.Request.Form["PageIndex"]); }        }        private int PageSize {            get { return this.Request.Form["PageSize"] == null ? 10 : int.Parse(this.Request.Form["PageSize"]); }        }        private string _commandText;        private string CommandText {            get {                return string.Format("{0} {1} {2} ", this._commandText, this.QueryWhere + this.GetSearchWhere, this.OrderBy);            }            set { this._commandText = value; }        }        private string QueryCode {            set {                string q = value;                switch (q) {                    case "001":                        this.CommandText = @"SELECT OrderID, CustomerID, EmployeeID, OrderDate,ShipCity FROM Orders where 1=1 ";                        this.Keys = "OrderID:訂單編號;CustomerID:客戶編號;EmployeeID:員工;OrderDate:訂單日期";                        break;                    case "002":                        this.CommandText = @"SELECT ProductName, SupplierID, QuantityPerUnit, CategoryID, UnitPrice FROM Products where 1=1 ";                        this.Keys = "ProductName:產品名稱;SupplierID:廠商";                        break;                }            }        }        private string QueryWhere {            get {                string q = this.Request.Form["QueryWhere"];                if (string.IsNullOrEmpty(q)) { return string.Empty; }                string[] items = q.Split(',');                string sql = string.Empty;                for (int i = 0; i < items.Length; i++) {                    sql += string.Format(" and {0}='{1}' ", items[i].Split(':')[0], items[i].Split(':')[1]);                }                return sql;            }        }        private string OrderBy {            get {                string q = this.Request.Form["OrderBy"];                if (string.IsNullOrEmpty(q)) { return string.Empty; }                string[] items = q.Split(',');                string sql = string.Empty;                for (int i = 0; i < items.Length; i++) {                    sql += string.Format(" {0} {1} {2} ", items[i].Split(':')[0], items[i].Split(':')[1] == "0" ? "asc" : "desc", i == items.Length-1 ? "" : ",");                }                return string.Format("{0} {1} ",sql.Equals(string.Empty) ? "" : " order by ", sql);            }        }        private string GetSearchWhere {            get {                if (string.IsNullOrEmpty(this.SearchKey) || string.IsNullOrEmpty(this.SearchValue)) return string.Empty;                return string.Format(" and {0} like '%{1}%' ", this.SearchKey, this.SearchValue);            }        }        private string SearchKey {            get {                return this.Request.Form["SearchKey"];            }        }        private string SearchValue {            get {                return this.Request.Form["SearchValue"];            }        }        private string _keys;        private string Keys {            get {                string[] key = this._keys.Split(';');                StringBuilder s = new StringBuilder();                s.Append("{");                for (int i = 0; i < key.Length; i++) {                    s.AppendFormat("\"{0}\":\"{1}\"{2}", key[i].Split(':')[0], key[i].Split(':')[1], i.Equals(key.Length - 1) ? "" : ",");                }                s.Append("}");                return s.ToString();            }            set { this._keys = value; }        }        private string GetAjaxPager(DataSet ds, int pageIndex, string keys) {            int totalRecord = Convert.ToInt32(ds.Tables[1].Rows[0][1]), pageCount = Convert.ToInt32(ds.Tables[1].Rows[0][0]);            return "{\"PagerContent\":" + ConvertToJson(ds.Tables[2]) + ",\"PageCount\":\"" + pageCount + "\",\"PageIndex\":\"" + pageIndex + "\",\"TotalRecord\":\"" + totalRecord + "\",\"Keys\":" + keys + "}";        }        public  string ErrorFormat(string error) {            return string.Format("{0}Error:\"{1}\"{2}", "{", error.Replace(System.Environment.NewLine, "\\n\\r").Replace("'", "\\'").Replace("\r", "\\r").Replace("\n", "\\n").Replace("\"", "\\\""), "}");        }        HttpResponse Response;        HttpRequest Request;        public void ProcessRequest(HttpContext context) {            this.Response = context.Response;            this.Request = context.Request;            this.Response.Clear();            this.Response.ClearContent();            this.Response.ClearHeaders();            this.Response.ContentEncoding = System.Text.Encoding.UTF8;            string msg = string.Empty;            try {                this.QueryCode = this.Request.Form["QueryCode"];                Common com = new Common();                DataSet ds = com.GetPageData(this.PageIndex, this.PageSize, this.CommandText);                Response.Write(GetAjaxPager(ds, this.PageIndex, this.Keys));            }            catch (Exception ex) {                Response.Write(ErrorFormat(ex.Message));            }        }        public bool IsReusable {            get {                return false;            }        }    }}

3:调用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Selector._Default" %><!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 language="javascript" type="text/javascript" src="Selector2.js"></script>    <script language="javascript" type="text/javascript">        function SelectValue(obj) {            Selector.show({ Width: 800, Height: 400, TitleName: "選擇訂單", SelectButton: obj },            { QueryCode: '001', QueryWhere: {}, OrderBy: { "OrderDate": "1"} },            [["txtName1", "txtName2", "txtName3"]]            );        }        function SelectValue2(obj) {            Selector.show({ Width: 600, Height: 300, TitleName: "選擇訂單", SelectButton: obj },            { QueryCode: '002', QueryWhere: {}, OrderBy: { "SupplierID": "1"} },            [["txtName1", "txtName2", "txtName3"]]            );        }          </script></head><body>    <form id="form1" runat="server">    <div>        <input type="button" value="選擇" onclick="SelectValue(this)" />        <br />        <input type="button" value="選擇2" onclick="SelectValue2(this)" />        <input type="text" id="txtName1" name="txtName1" />        <input type="text" id="txtName2" name="txtName2" />        <input type="text" id="txtName3" name="txtName3" />    </div>    </form></body></html>

4:效果图

目前只支持ie


原创粉丝点击