一 JS实现
年月日
<
HTML
>
<
HEAD
>
<
title
>
年月日三联动下拉框
</
title
>
<
meta
http-equiv
='Content-Type'
content
='text/html;
charset
=gb2312'
>
<
meta
name
='author'
content
='http://singlepine.cnblogs.com/'
>
</
HEAD
>
<
body
>
<
form
name
="form1"
>
<
select
name
="YYYY"
onchange
="YYYYDD(this.value)"
>
<
option
value
=""
selected
>
请选择 年
</
option
>
</
select
>
<
select
name
="MM"
onchange
="MMDD(this.value)"
>
<
option
value
=""
selected
>
选择 月
</
option
>
</
select
>
<
select
name
="DD"
>
<
option
value
=""
selected
>
选择 日
</
option
>
</
select
>
</
form
>
<
script
language
="JavaScript"
>
<!-- function YYYYMMDDstart() { MonHead = [ 31 , 28 , 31 , 30 , 31 , 30 , 31 , 31 , 30 , 31 , 30 , 31 ]; // 先给年下拉框赋内容 var y = new Date().getFullYear(); for ( var i = (y - 30 ); i < (y + 30 ); i ++ ) // 以今年为准,前30年,后30年 document.form1.YYYY.options.add( new Option( " " + i + " 年 " , i)); // 赋月份的下拉框 for ( var i = 1 ; i < 13 ; i ++ ) document.form1.MM.options.add( new Option( " " + i + " 月 " , i)); document.form1.YYYY.value = y; document.form1.MM.value = new Date().getMonth() + 1 ; var n = MonHead[ new Date().getMonth()]; if ( new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n ++ ; writeDay(n); // 赋日期下拉框 document.form1.DD.value = new Date().getDate(); } if (document.attachEvent) window.attachEvent( " onload " , YYYYMMDDstart); else window.addEventListener('load', YYYYMMDDstart, false ); function YYYYDD(str) // 年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; if (MMvalue == "" ) { var e = document.form1.DD; optionsClear(e); return ;} var n = MonHead[MMvalue - 1 ]; if (MMvalue == 2 && IsPinYear(str)) n ++ ; writeDay(n) } function MMDD(str) // 月发生变化时日期联动 { var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; if (YYYYvalue == "" ) { var e = document.form1.DD; optionsClear(e); return ;} var n = MonHead[str - 1 ]; if (str == 2 && IsPinYear(YYYYvalue)) n ++ ; writeDay(n) } function writeDay(n) // 据条件写日期的下拉框 { var e = document.form1.DD; optionsClear(e); for ( var i = 1 ; i < (n + 1 ); i ++ ) e.options.add( new Option( " " + i + " 日 " , i)); } function IsPinYear(year) // 判断是否闰平年 { return ( 0 == year % 4 && (year % 100 != 0 || year % 400 == 0 )); } function optionsClear(e) { e.options.length = 1 ; } // -->
</
script
>
</
body
>
</
HTML
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
>
<
title
>
下拉框测试
</
title
>
</
head
>
<
script
src
="change_region.js"
></
script
>
<
form
name
="form1"
method
="post"
>
<
body
>
<
table
>
<
tr
>
<
td
>
国家
</
td
>
<
td
width
="140"
class
="SELECT"
><
select
name
="country"
id
="country"
onChange
="change_region( window.document.form1.state , window.document.form1.country.options[selectedIndex].value );"
>
<
option
value
="Not set"
>
-- 所有国家 --
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.country, country, "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
州/省
</
td
>
<
td
class
="SELECT"
>
<
div
align
="left"
>
<
select
name
="state"
onChange
="change_region( window.document.form1.city , window.document.form1.state.options[selectedIndex].value );"
>
<
option
value
="Not set"
>
-- 所有州/省--
</
option
>
</
select
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
城市
</
td
>
<
td
>
<
select
name
="city"
id
="city"
>
<
option
value
="Not set"
>
-- 城市 --
</
option
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
年龄
</
td
>
<
td
>
<
select
name
='age'
size
='1'
>
<
option
value
="0"
>
-- 都可以 --
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.age, age, "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
身高
</
td
>
<
td
>
<
select
name
='height'
size
='1'
>
<
option
value
="0"
>
-- 都可以 --
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.height, height, "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
体重
</
td
>
<
td
>
<
select
name
='weight'
size
='1'
>
<
option
value
="0"
>
-- 都可以 --
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.weight, weight, "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
学位
</
td
>
<
td
>
<
select
name
="degree"
id
="degree"
>
<
option
value
="Not set"
selected
>
-- 都可以 --
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.degree , degree , "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
职业
</
td
>
<
td
>
<
select
name
="occupation"
id
="occupation"
>
<
option
value
="Not set"
selected
>
-- 职业 --
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.occupation, occupation, "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
交友目的
</
td
>
<
td
>
<
select
id
=purpose
name
=purpose
>
<
option
value
="Not set"
selected
>
都可以
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.purpose, purpose, "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
生肖
</
td
>
<
td
>
<
select
name
="sheng_xiao"
id
="sheng_xiao"
>
<
option
value
="Not set"
>
不详
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.sheng_xiao , sheng_xiao , "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
星座
</
td
>
<
td
>
<
select
name
="astrology"
id
="astrology"
>
<
option
value
="Not set"
selected
>
不详
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.astrology , astrology , "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
血型
</
td
>
<
td
>
<
select
name
="blood_type"
id
="blood_type"
>
<
option
value
="Not set"
selected
>
不详
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.blood_type , blood_type , "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
相貌
</
td
>
<
td
>
<
select
name
="appearance"
id
="appearance"
>
<
option
value
="Not set"
selected
>
以后再告诉你
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.appearance , appearance , "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
年收入
</
td
>
<
td
>
<
select
name
="income"
id
="income"
>
<
option
value
="Not set"
selected
>
以后再告诉你
</
option
>
<
script
language
="javascript"
>
set_select_options( window.document.form1.income , income , "" ) ;
</
script
>
</
select
>
</
td
>
</
tr
>
</
table
>
</
body
>
</
form
>
</
html
>
html源代码下载/Files/singlepine/country.rar c#源代码下载/Files/singlepine/WebApplication3.rar 这种错误一般都是编码格式引起的 处理方法:分别打开你的js和aspx文件,然后菜单file-->Advanced Save Options-->选择Unicode (UTF-8 with signature)-Codepage 65001,然后确定,保存就可以了
# re: 国家,省/州,城市下拉框 2005-12-29 15:16
二 xmlhttp实现
1.html代码
<
HTML
>
<
HEAD
>
<
title
>
XmlHttp实现无刷新三联动下拉框
</
title
>
<
meta
name
="GENERATOR"
Content
="Microsoft Visual Studio .NET 7.1"
>
<
meta
name
="CODE_LANGUAGE"
Content
="C#"
>
<
meta
name
="vs_defaultClientScript"
content
="JavaScript"
>
<
meta
name
="vs_targetSchema"
content
="http://schemas.microsoft.com/intellisense/ie5"
>
</
HEAD
>
<
body
MS_POSITIONING
="GridLayout"
>
<
form
id
="Form1"
method
="post"
runat
="server"
>
<
INPUT
style
="Z-INDEX: 102; LEFT: 448px; WIDTH: 56px; POSITION: absolute; TOP: 80px; HEIGHT: 24px"
onclick
="getData();"
type
="button"
value
="保存"
id
="Button1"
name
="Button1"
runat
="server"
>
<
asp:TextBox
id
="TextBox1"
style
="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 80px"
runat
="server"
Width
="424px"
></
asp:TextBox
>
<
asp:DropDownList
id
="DropDownList2"
runat
="server"
style
="Z-INDEX: 103; LEFT: 176px; POSITION: absolute; TOP: 120px"
></
asp:DropDownList
>
<
asp:DropDownList
id
="DropDownList1"
runat
="server"
style
="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 120px"
></
asp:DropDownList
>
<
asp:DropDownList
id
="DropDownList3"
runat
="server"
style
="Z-INDEX: 105; LEFT: 296px; POSITION: absolute; TOP: 120px"
></
asp:DropDownList
><
INPUT
style
="Z-INDEX: 106; LEFT: 8px; WIDTH: 160px; POSITION: absolute; TOP: 176px; HEIGHT: 22px"
type
="hidden"
size
="21"
id
="hidprovince"
runat
="server"
><
INPUT
style
="Z-INDEX: 107; LEFT: 184px; POSITION: absolute; TOP: 176px"
type
="hidden"
id
="hidcity"
runat
="server"
><
INPUT
style
="Z-INDEX: 108; LEFT: 360px; POSITION: absolute; TOP: 176px"
type
="hidden"
id
="hidarea"
runat
="server"
>
<
SCRIPT
LANGUAGE
="JavaScript"
>
<!-- // 以XML求取DropDownList2的数据 function XmlPost2(obj) { var svalue = obj.value; var webFileUrl = " ?povinceid= " + svalue; var result = "" ; var xmlHttp = new ActiveXObject( " MSXML2.XMLHTTP " ); xmlHttp.open( " POST " , webFileUrl, false ); xmlHttp.send( "" ); result = xmlHttp.responseText; if (result != "" ) { document.all( " DropDownList2 " ).length = 0 ; var piArray = result.split( " , " ); for ( var i = 0 ;i < piArray.length;i ++ ) { var ary1 = piArray[i].toString().split( " | " ); document.all( " DropDownList2 " ).options.add( new Option(ary1[ 1 ].toString(),ary1[ 0 ].toString())); } } else { alert(result); } } // 以XML求取DropDownList3的数据 function XmlPost3(obj) { var svalue = obj.value; var webFileUrl = " ?cityid= " + svalue; var result = "" ; var xmlHttp = new ActiveXObject( " MSXML2.XMLHTTP " ); xmlHttp.open( " POST " , webFileUrl, false ); xmlHttp.send( "" ); result = xmlHttp.responseText; if (result != "" ) { document.all( " DropDownList3 " ).length = 0 ; var piArray = result.split( " , " ); for ( var i = 0 ;i < piArray.length;i ++ ) { var ary1 = piArray[i].toString().split( " | " ); document.all( " DropDownList3 " ).options.add( new Option(ary1[ 1 ].toString(),ary1[ 0 ].toString())); } } else { alert(result); } } function getData() { var province = document.getElementById( " DropDownList1 " ); var pindex = province.selectedIndex; var pValue = province.options[pindex].value; var pText = province.options[pindex].text; var city = document.getElementById( " DropDownList2 " ); var cindex = city.selectedIndex; var cValue = city.options[cindex].value; var cText = city.options[cindex].text; var area = document.getElementById( " DropDownList3 " ); var aindex = area.selectedIndex; var aValue = area.options[aindex].value; var aText = area.options[aindex].text; var txt = document.getElementById( " TextBox1 " ); document.getElementById( " <%=TextBox1.ClientID%> " ).innerText = " 省: " + pValue + " | " + pText + " 市: " + cValue + " | " + cText + " 区: " + aValue + " | " + aText; document.Form1.hidprovince.value = pValue; document.Form1.hidcity.value = cValue; document.Form1.hidarea.value = aValue; } // -->
</
SCRIPT
>
</
form
>
</
body
>
</
HTML
>
2.cs代码
public
class
WebForm1 : System.Web.UI.Page
{ protected System.Web.UI.WebControls.DropDownList DropDownList1; protected System.Web.UI.WebControls.DropDownList DropDownList2; protected System.Web.UI.WebControls.DropDownList DropDownList3; protected System.Web.UI.WebControls.TextBox TextBox1; protected System.Web.UI.HtmlControls.HtmlInputHidden hidarea; protected System.Web.UI.HtmlControls.HtmlInputHidden hidcity; protected System.Web.UI.HtmlControls.HtmlInputHidden hidprovince; protected System.Web.UI.HtmlControls.HtmlInputButton Button1; public static string ConnectionString = System.Configuration .ConfigurationSettings .AppSettings[ " ConnectionString " ]; GetDataSet #region GetDataSet public static DataSet GetDataSet( string sql) { SqlDataAdapter sda = new SqlDataAdapter(sql,ConnectionString); DataSet ds = new DataSet(); sda.Fill(ds); return ds; } #endregion property #region property private string povinceid { get { if (ViewState[ " povinceid " ] != null && ViewState[ " povinceid " ].ToString() != "" ) { return ViewState[ " povinceid " ].ToString(); } else { if (Request[ " povinceid " ] != null && Request[ " povinceid " ].ToString() != "" ) { return Request[ " povinceid " ]; } else { return "" ; } } } set { ViewState[ " povinceid " ] = value; } } private string cityid { get { if (ViewState[ " cityid " ] != null && ViewState[ " cityid " ].ToString() != "" ) { return ViewState[ " cityid " ].ToString(); } else { if (Request[ " cityid " ] != null && Request[ " cityid " ].ToString() != "" ) { return Request[ " cityid " ]; } else { return "" ; } } } set { ViewState[ " povinceid " ] = value; } } #endregion Page_Load #region Page_Load private void Page_Load( object sender, System.EventArgs e) { if ( ! this .IsPostBack) { this .down1_bind(); this .DropDownList1.Attributes.Add( " onchange " , " XmlPost2(this); " ); this .DropDownList2.Attributes.Add( " onchange " , " XmlPost3(this); " ); } if (povinceid != "" ) { this .down2_bind(povinceid); } if (cityid != "" ) { this .down3_bind(cityid); } } #endregion down2_bind #region down2_bind private void down2_bind( string id) { string mystr = "" ; string sql = " select cityID,city from city where father = ' " + id + " ' " ; DataSet ds = GetDataSet(sql); if (ds.Tables[ 0 ].Rows.Count != 0 ) { for ( int i = 0 ;i < ds.Tables[ 0 ].Rows.Count;i ++ ) { mystr += " , " + ds.Tables[ 0 ].Rows[i][ 0 ].ToString() + " | " + ds.Tables[ 0 ].Rows[i][ 1 ].ToString(); } mystr = mystr.Substring( 1 ); } this .Response.Write(mystr); this .Response.End(); } #endregion down3_bind #region down3_bind private void down3_bind( string id) { string mystr = "" ; string sql = " select areaID,area from area where father = ' " + id + " ' " ; DataSet ds = GetDataSet(sql); if (ds.Tables[ 0 ].Rows.Count != 0 ) { for ( int i = 0 ;i < ds.Tables[ 0 ].Rows.Count;i ++ ) { mystr += " , " + ds.Tables[ 0 ].Rows[i][ 0 ].ToString() + " | " + ds.Tables[ 0 ].Rows[i][ 1 ].ToString(); } mystr = mystr.Substring( 1 ); } this .Response.Write(mystr); this .Response.End(); } #endregion down1_bind #region down1_bind private void down1_bind() { string sql = " select provinceID,province from povince " ; DataSet ds = GetDataSet(sql); this .DropDownList1.DataSource = ds; this .DropDownList1.DataValueField = " provinceID " ; this .DropDownList1.DataTextField = " province " ; this .DropDownList1.DataBind(); } #endregion Web Form Designer generated code #region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); base .OnInit(e); } /**/ /// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { this .Button1.ServerClick += new System.EventHandler( this .Button1_ServerClick); this .Load += new System.EventHandler( this .Page_Load); } #endregion private void Button1_ServerClick( object sender, System.EventArgs e) { string sql = " insert into testgrid (province,city,area) " ; sql += " values(' " + this .hidprovince.Value + " ',' " + this .hidcity.Value + " ',' " + this .hidarea.Value + " ') " ; Response.Write(sql); } }
3.数据库/Files/singlepine/area.rar 4."Ajax实现无刷新三联动下拉框"http://singlepine.cnblogs.com/articles/257954.html
5.源代码下载/Files/singlepine/XmlHttpselect.rar
三 xmlhttp调用webservices
使用微软提供的webservice.htc实现通过JavaScript调用WebService. 1.首先从微软网站上下载webservice.htc,我附件源代码也包含,不下载也可以http://msdn.microsoft.com/workshop/author/webservice/webservice.htc 2.在网页BODY中添加一个DIV,实现对webservice.htc的引用 5.建立测试页面
<
HTML
>
<
HEAD
>
<
title
>
jsWebServices
</
title
>
<
meta
name
="GENERATOR"
Content
="Microsoft Visual Studio .NET 7.1"
>
<
meta
name
="CODE_LANGUAGE"
Content
="C#"
>
<
meta
name
="vs_defaultClientScript"
content
="JavaScript"
>
<
meta
name
="vs_targetSchema"
content
="http://schemas.microsoft.com/intellisense/ie5"
>
<
script
language
="javascript"
>
<!-- var str_province; var str_city; var str_area; function window_onload() { service.useService( " /Service1.asmx?WSDL " , " myselect " ); str_province = service.myselect.callService(province_Result, " getProvince " ); } function province_Result(result) { if ( ! result.error) { document.all( " select_province " ).length = 0 ; if (result.value.substring( 0 , 1 ) == " , " ) result.value = result.value.substring( 1 ,result.length); var piArray = result.value.split(','); for ( var i = 0 ;i < piArray.length;i ++ ) { var ary1 = piArray[i].toString().split(' | '); document.all( " select_province " ).options.add( new Option(ary1[ 1 ].toString(),ary1[ 0 ].toString())); } } } function province_onchange() { var province = document.getElementById( " select_province " ); var pindex = province.selectedIndex; var pValue = province.options[pindex].value; var pText = province.options[pindex].text; str_city = service.myselect.callService(city_Result, " getCity " ,pValue); } function city_onchange() { var city = document.getElementById( " select_city " ); var cindex = city.selectedIndex; var cValue = city.options[cindex].value; var cText = city.options[cindex].text; str_area = service.myselect.callService(area_Result, " getArea " ,cValue); } function city_Result(result) { if ( ! result.error) { document.all( " select_city " ).length = 0 ; if (result.value.substring( 0 , 1 ) == " , " ) result.value = result.value.substring( 1 ,result.length); var piArray = result.value.split( " , " ); for ( var i = 0 ;i < piArray.length;i ++ ) { var ary1 = piArray[i].toString().split( " | " ); document.all( " select_city " ).options.add( new Option(ary1[ 1 ].toString(),ary1[ 0 ].toString())); } } } function area_Result(result) { if ( ! result.error) { document.all( " select_area " ).length = 0 ; if (result.value.substring( 0 , 1 ) == " , " ) result.value = result.value.substring( 1 ,result.length); var piArray = result.value.split( " , " ); for ( var i = 0 ;i < piArray.length;i ++ ) { var ary1 = piArray[i].toString().split( " | " ); document.all( " select_area " ).options.add( new Option(ary1[ 1 ].toString(),ary1[ 0 ].toString())); } } } // -->
</
script
>
</
HEAD
>
<
body
MS_POSITIONING
="GridLayout"
onload
="return window_onload()"
>
<
div
id
="service"
style
="BEHAVIOR:url(webservice.htc)"
></
div
>
<
form
id
="Form1"
method
="post"
runat
="server"
>
<
SELECT
id
="select_province"
onchange
="province_onchange();"
style
="Z-INDEX: 101; LEFT: 8px; WIDTH: 128px; POSITION: absolute; TOP: 16px"
>
<
OPTION
selected
></
OPTION
>
</
SELECT
><
SELECT
id
="select_city"
onchange
="city_onchange();"
style
="Z-INDEX: 102; LEFT: 160px; WIDTH: 128px; POSITION: absolute; TOP: 16px"
>
<
OPTION
selected
></
OPTION
>
</
SELECT
><
SELECT
id
="select_area"
style
="Z-INDEX: 103; LEFT: 304px; WIDTH: 128px; POSITION: absolute; TOP: 16px"
>
<
OPTION
selected
></
OPTION
>
</
SELECT
>
</
form
>
</
body
>
</
HTML
>
6.引用webservicers
7.数据库脚本
if
exists
(
select
*
from
dbo.sysobjects
where
id
=
object_id
(N
'
[dbo].[area]
'
)
and
OBJECTPROPERTY
(id, N
'
IsUserTable
'
)
=
1
)
drop
table
[
dbo
]
.
[
area
]
GO
if
exists
(
select
*
from
dbo.sysobjects
where
id
=
object_id
(N
'
[dbo].[province]
'
)
and
OBJECTPROPERTY
(id, N
'
IsUserTable
'
)
=
1
)
drop
table
[
dbo
]
.
[
province
]
GO
if
exists
(
select
*
from
dbo.sysobjects
where
id
=
object_id
(N
'
[dbo].[city]
'
)
and
OBJECTPROPERTY
(id, N
'
IsUserTable
'
)
=
1
)
drop
table
[
dbo
]
.
[
city
]
GO
CREATE
TABLE
[
dbo
]
.
[
area
]
(
[
id
]
[
int
]
NOT
NULL
,
[
areaID
]
[
nvarchar
]
(
50
) COLLATE Chinese_PRC_CI_AS
NULL
,
[
area
]
[
nvarchar
]
(
60
) COLLATE Chinese_PRC_CI_AS
NULL
,
[
father
]
[
nvarchar
]
(
6
) COLLATE Chinese_PRC_CI_AS
NULL
)
ON
[
PRIMARY
]
GO
CREATE
TABLE
[
dbo
]
.
[
province
]
(
[
id
]
[
int
]
NOT
NULL
,
[
provinceID
]
[
nvarchar
]
(
6
) COLLATE Chinese_PRC_CI_AS
NULL
,
[
province
]
[
nvarchar
]
(
40
) COLLATE Chinese_PRC_CI_AS
NULL
)
ON
[
PRIMARY
]
GO
CREATE
TABLE
[
dbo
]
.
[
city
]
(
[
id
]
[
int
]
NOT
NULL
,
[
cityID
]
[
nvarchar
]
(
6
) COLLATE Chinese_PRC_CI_AS
NULL
,
[
city
]
[
nvarchar
]
(
50
) COLLATE Chinese_PRC_CI_AS
NULL
,
[
father
]
[
nvarchar
]
(
6
) COLLATE Chinese_PRC_CI_AS
NULL
)
ON
[
PRIMARY
]
GO
8.下载真实数据
/Files/singlepine/area.rar
9.源代码下载
/Files/singlepine/jsWebServices.rar
< div id ="service" style ="BEHAVIOR:url(webservice.htc)" ></ div >
3.编写JavaScript,实现对WebService的引用:
function
window_onload()
{ service.useService( " /Service1.asmx?WSDL " , " myselect " ); str_province = service.myselect.callService(province_Result, " getProvince " ); }
useService 语法:sElementID .useService( sWebServiceURL , sFriendlyName [ , oUseOptions ]
) useService 参数:
sElementID Required. The
id
of the element to which the
WebService
behavior is attached. sWebServiceURL Required. String specifying the URL of the Web Service, using one of the following path types. See the examples section, where several variations of this parameter are shown.
Web Service file name A Web service file, which has an .asmx file extension. This short form of the URL is sufficient, provided that the Web service is located in the same folder as the Web page using the WebService behavior. In this case, the ?WSDL query string is assumed by the behavior. WSDL file name A Web Services Description Language (WSDL) file name. The WSDL file must have a .wsdl file extension. Full file path Full path to a WebService (.asmx) or WSDL (.wsdl) file. A file path to a Web Service must include the ?WSDL query string. Either a local file path or a URL can be specified. Relative path A relative path to a WebService (.asmx) or WSDL (.wsdl) file. A file path to a Web Service must include the ?WSDL query string.
sFriendlyName Required. String representing a friendly name for the Web Service URL. oUseOptions Optional. An instance of the
useOptions
object.
callService语法:iCallID = sElementID. sFriendlyName .callService( [ oCallHandler ] , fo , oParam
) callService参数:
sElementID Required. The
id
of the element to which the
WebService
behavior is attached. sFriendlyName Required. The friendly name for the Web Service, which is defined by calling the
useService
method. oCallHandler Optional. Name of a script callback function that handles the results returned from this instance of the method call. fo Required. One of the following possible values.
strFuncName A String representing the name of the remote function being called. The String must be bounded by single or double quotation marks. objCall A
call
object, which has the necessary properties defined to call a remote function.
oParam Required. One or more comma-delimited parameters, which are passed to the method name specified by fo .
4.建立WebService,代码如下
public class
Service1 : System.Web.Services.WebService
{ public static string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings[ " ConnectionString " ]; SqlConnection conn = new SqlConnection(ConnectionString); public Service1() { // CODEGEN: This call is required by the ASP.NET Web Services Designer InitializeComponent(); } Component Designer generated code #region Component Designer generated code // Required by the Web Services Designer private IContainer components = null ; /**/ /// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { } /**/ /// <summary> /// Clean up any resources being used. /// </summary> protected override void Dispose( bool disposing ) { if (disposing && components != null ) { components.Dispose(); } base .Dispose(disposing); } #endregion getProvince #region getProvince [WebMethod(true )] public string getProvince() { string sql = " select * from province " ; SqlCommand cmd = new SqlCommand(sql,conn); cmd.Connection.Open(); SqlDataReader dr = cmd.ExecuteReader(); string s = "" ; while (dr.Read()) { s += " , " + dr[ " provinceID " ].ToString() + " | " + dr[ " province " ].ToString(); } return s; } #endregion getCity #region getCity [WebMethod(true )] public string getCity( string provinceid) { string str = " select * from city where father = ' " + provinceid + " ' " ; SqlCommand cmd = new SqlCommand(str,conn); cmd.Connection.Open(); SqlDataReader dr = cmd.ExecuteReader(); string s = "" ; while (dr.Read()) { s += " , " + dr[ " cityID " ].ToString() + " | " + dr[ " city " ].ToString(); } return s; } #endregion getArea #region getArea [WebMethod(true )] public string getArea( string cityid) { string str = " select * from area where father=' " + cityid + " ' " ; SqlCommand cmd = new SqlCommand(str,conn); cmd.Connection.Open(); SqlDataReader dr = cmd.ExecuteReader(); string s = "" ; while (dr.Read()) { s += " , " + dr[ " areaID " ].ToString() + " | " + dr[ " area " ].ToString(); } return s; } #endregion }
#
re: JavaScript调用Web Services实现无刷新三联动
2005-12-21 19:06
#
re: JavaScript调用Web Services实现无刷新三联动
2005-12-29 12:11
太强了,能不能和你多多交流啊!
以后希望有好的文章多多发表!!!!!!!!
回复
#
re: JavaScript调用Web Services实现无刷新三联动
2005-12-31 14:28
这个在火狐浏览器不支持!
搂住应该 做成支持多种浏览器版本!!
回复
#
re: JavaScript调用Web Services实现无刷新三联动
2006-01-12 11:27
在测试页面是不是要绑定select_province、select_city、select_area这三个数据呀
回复
#
re: JavaScript调用Web Services实现无刷新三联动
2006-01-12 12:40
测试页面后台不用绑定,会在前台通过js来处理
回复
<
html
>
<
head
>
<
style
>
<!-- .cls1 { } { position : absolute ; left : 250px ; top : 89px ; width : 216px ; height : 72px ; z-index : 1 ; } .cls2 { } { position : absolute ; left : 250px ; top : 89px ; width : 95px ; height : 18px ; z-index : 2 } input { } { font-size : 12px ; padding-top : 2px ; padding-left : 2px ; width : 127 ; } //-->
</
style
>
</
head
>
<
script
>
<!-- function addOption(pos) { if (event.keyCode == 13 ) { var select_obj = document.getElementById( " myselect " ); var text_value = document.getElementById( " test " ).value; if (select_obj.length) { for ( var i = 0 ;i < select_obj.length;i ++ ) { // 如果已经存在,不添加,直接退出 if (select_obj.options[i].text == text_value) alert( " 选项已存在,请重新输入 " ); } } var the_option = new Option(text_value,text_value); select_obj.add(the_option); select_obj.selectedIndex = select_obj.options.length - 1 } } // -->
</
script
>
<
div
class
="cls1"
style
="clip: rect(3 280 21 110)"
>
<
select
name
="myselect"
style
="width:127"
onchange
="document.getElementById('test').value=this.value"
>
<
option
value
=1
>
1
</
option
>
<
option
value
=2
>
2
</
option
>
<
option
value
=3
>
3
</
option
>
</
select
>
</
div
>
<
div
class
="cls2"
>
<
input
type
="text"
name
="test"
onkeydown
="addOption()"
size
="20"
style
="width: 127; height: 23"
>
</
div
>
</
body
>
</
html
>
#
re: DropDownList既能选择又能输入
2006-01-10 17:03
// 如果已经存在,不添加,直接退出
if (select_obj.options[i].text==text_value)
{
alert("选项已存在,请重新输入");
return;
}
改为这样就可以了
回复
<
HTML
>
<
HEAD
>
<
title
>
WebForm5
</
title
>
<
meta
content
="Microsoft Visual Studio .NET 7.1"
name
="GENERATOR"
>
<
meta
content
="C#"
name
="CODE_LANGUAGE"
>
<
meta
content
="JavaScript"
name
="vs_defaultClientScript"
>
<
meta
content
="http://schemas.microsoft.com/intellisense/ie5"
name
="vs_targetSchema"
>
</
HEAD
>
<
BODY
>
<
form
id
="Form1"
method
="post"
runat
="server"
>
<
asp:DropDownList
id
="drpStatus"
style
="Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 72px"
runat
="server"
></
asp:DropDownList
>
</
form
>
</
BODY
>
</
HTML
>
using
System;
using
System.Collections;
using
System.ComponentModel;
using
System.Data;
using
System.Drawing;
using
System.Web;
using
System.Web.SessionState;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.HtmlControls;
using
System.Data.SqlClient;
namespace
Document
{ /**/ /// <summary> /// Summary description for WebForm5. /// </summary> public class WebForm5 : System.Web.UI.Page { protected System.Web.UI.WebControls.DropDownList drpStatus; private void Page_Load( object sender, System.EventArgs e) { ListType(); } private void ListType() { drpStatus.Items.Clear(); drpStatus.DataSource = ListTypeForEnum(); drpStatus.DataValueField = " value " ; drpStatus.DataTextField = " text " ; drpStatus.DataBind(); } public static IList ListTypeForEnum() { ArrayList list = new ArrayList(); foreach ( int i in Enum.GetValues( typeof (EnumActivityType))) { ListItem listitem = new ListItem(Enum.GetName( typeof (EnumActivityType), i), i.ToString()); list.Add(listitem); } return list; } public enum EnumActivityType { Task = 1 , Fax = 2 , Phone = 3 , Email = 4 , Reminder = 5 , Appointment = 6 , Expiration = 7 , Inquiry = 8 } Web 窗体设计器生成的代码 #region Web 窗体设计器生成的代码 override protected void OnInit(EventArgs e) { // // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base .OnInit(e); } /**/ /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { this .Load += new System.EventHandler( this .Page_Load); } #endregion } }
#
re: DropDownList既能选择又能输入
2005-12-02 10:43
Feedback
永远支持楼主,多多发表一些技术性文章!!!!!!!!!!
回复
但是在静态的可以,是不是还要再引用什么,还是加什么语句呢??
总是提示错误:缺少")",而且下面已经定义的变量,它也没说定义!!!!!!
用静态的直接就可以了,我测试了很久都不行,是不是在ASP.NET不行呢?
望楼主看到消息,能给个回复???????? 回复
您能不能也做个ASP.NET的,把它里面代码一些该改的给改一下,那后再上传一下,好吗? 回复
什么原因会导致一个行,一个不行呢?
希望楼主能给我解释一下? 回复
requestEncoding="utf-8"
responseEncoding="utf-8"
/>
<httpHandlers> 回复
分析器错误信息: 行“98”上的“httpHandlers”开始标记与文件“file:///c:/inetpub/wwwroot/城市下拉/web.config”中的结束标记“system.web”不匹配。 行 99,位置 4。
源错误:
行 97: />
行 98: <httpHandlers>
行 99: </system.web>
行 100:
行 101:</configuration>
还是要加在什么地方呢??????????
回复
后缀让它是.aspx,不是HTML!而且在.NET环境中可以运行出效果来呢?
一直想弄清楚,浪费了快一天时间呢?
有时间的话,能不能做个上传上来呢? 回复