DIV+CSS+JQ to realize the expansion of linkage between provinces and cities _jquery

The company's provincial and municipal data comparison pit dad, is through the EHR system to generate ID to match, such as the corresponding ID 01211014aop145 in Fujian province, the city also corresponds to an ID, and then the county will ignore. Then I found a bunch of resource plug-ins on the Internet. Whatever the feeling doesn't apply, decide to write one yourself. Because they are also half bucket of water that kind of interface do not know how to get, what kind of format, what style, color ah. In silence to find Jingdong, Amazon, Taobao, when they about the province of the city is how to do. The figure is as follows:

Finally, I combined to do the following figure:

Nonsense not much to say the source code:

<style type= "Text/css" > #divProCity {position:absolute; 
width:350px; 
max-height:220px; 
Height:auto; 
Display:none; 
border:1px solid #d3d3d3; 
z-index:100; 
Overflow:auto; 
Overflow-x:hidden; 
}. headmenu {height:34px; 
Background: #f6f6f6; 
margin:0; 
padding:0; 
}. headmenu Li {float:left; 
Text-align:center; 
width:60px; 
height:32px; 
List-style:none; 
Background: #f6f6f6; 
line-height:32px; 
font-size:13px; 
Cursor:pointer; 
}. Headmenu Li.lidefault {background: #F60; 
Color: #fff; 
margin:0; 
padding:0; 
}. LiDiv1, liDiv2 {height:auto; 
min-height:30px; 
border-top:2.5px solid #F60; 
Margin-top: -2px; 
}. liDiv3 {height:auto; 
min-height:30px; 
max-height:200px; 
border-top:2px solid #F60; 
Margin-top: -2px; 
}. lidiv2,.lidiv3 {display:none; 
}. LiDiv1 ul,. liDiv2 ul {padding:2px; 
margin:0; 
Clear:both; 
}. liDiv3 ul {padding:2px; 
margin:0; 
Clear:both; 
LiDiv1 ul Li,. LiDiv2 ul li {float:left; Font-size:14px; 
width:60px; 
line-height:180%; 
List-style:none; 
Color: #252525; 
Margin:0 4px; 
Cursor:pointer; 
Text-align:center; 
}. LiDiv3 ul li {float:left; 
font-size:13px; 
line-height:150%; 
Color: #252525; 
MARGIN:1PX 3px; 
List-style:none; 
Cursor:pointer; 
Text-align:center; 
LiDiv1 ul Li:hover,. LiDiv2 UL Li:hover,.lidiv3 ul li:hover {color: #8b51cb; 
Cursor:pointer; 
Text-decoration:none; 
padding:0; 
Background: #ccc; 
}. btn_img1 {width:20px; 
Vertical-align:middle; 
margin-left:-31px; 
Border:none; 
Outline:none; 
height:10px; 
Cursor:pointer; 
Background:url (images/img_1.png) No-repeat Center Center; 
Z-index:10; 
}. btn_img2 {margin-left:-31px; 
margin-bottom:2px; 
width:20px; 
height:10px; 
Border:none; 
Outline:none; 
Vertical-align:middle; 
Cursor:pointer; 
Background:url (images/img_2.png) No-repeat Center Center; 
Z-index:10;  } </style>

page layout:

script:

<script type= "Text/javascript" > $ (document). Ready (function () {$ (' #divProCity ul.headmenu li '). Click (Function ( 
) {var index = $ (this). index (); 
Foreign clicks Invalid if (index = = 2) {return false; 
} $ (this). addclass ("Lidefault"). Siblings (). Removeclass ("Lidefault"); 
$ (' #divProCity '). Children (' div '). Eq. Show (). Siblings (' div '). Hide (); 
}); 
)//Select domestic and foreign $ ("[Name$=radio1]"). Click (function () {var value = $ (this). Val (); 
Changes in foreign countries when the value of the reset provinces is empty, icon restore, close the bomb layer, to determine whether the input box can be edited $ ("input[id*=txt_procity]"). Val ('); 
$ (' #btnImg '). attr ("Class", "btn_img1"); $ (' #btnImg '). attr ("name", "IMG1"); 
The $ (' #divProCity ') that marks the toggle picture. CSS ("display", "none"); 
if (value = = 2) {//Foreign $ (' #txt_proCity '). Removeattr ("ReadOnly"); 
else {$ (' #txt_proCity '). attr ("ReadOnly", "ReadOnly"); 
The Fuzzy query function Getoutcounty () {//border:1px solid #d3d3d3; background: #f6f6f6; alternate color background: #f7f7f7; 
var txt = $ ("input[id*=txt_procity]"); 
if (Txt.val (). Trim () = = "") {return false; var height = txt.height (); 
var x = Txt.offset (). Top; 
var y = Txt.offset (). Left; 
$ (' #divProCity '). CSS ({display: "block", Left:y + "px", top:x + height + 8 + "px"}); 
$ (' #divProCity ul.headmenu li '). EQ (2). Show (). CSS ("width", "70px"). AddClass ("Lidefault"). Siblings (). Hide (); 
$ (' #divProCity '). Children (' div '). EQ (2). Show (). Siblings (' div '). Hide (); 
$ (' #btnImg '). attr ("Class", "Btn_img2"); $ (' #btnImg '). attr ("name", "Img2"); To mark the switch picture//Fuzzy query related code var SS = "<ul><li> Fuzhou Fuzhou </li><li> Fuzhou Fuzhou </li><li> Fu Fuzhou State </li 
><li> Fuzhou Fuzhou </li></ul> "; 
$ ('. LiDiv3 '). html ('); 
$ ('. LiDiv3 '). HTML (ss); 
Changeimg () {var _selectvalue = $ ("Input:checked[name$=radio1]") by clicking the right button at home and abroad. Val (); if (_selectvalue = = "" | | _selectvalue==undefined) {alert ("Please first choose whether to go abroad!") 
"); 
return false; 
var txt = $ ("input[id*=txt_procity]"); 
var height = txt.height (); 
var x = Txt.offset (). Top; 
var y = Txt.offset (). Left; 
var name = $ (' #btnImg '). attr ("name"); if (name = = "Img1") {$ (' #bTnimg '). attr ("Class", "Btn_img2"); 
$ (' #btnImg '). attr ("name", "Img2"); 
$ (' #divProCity '). CSS ({display: "block", Left:y + "px", top:x + height + 8 + "px"}); 
1 Domestic 2 Foreign Control Panel menu items Display if (_selectvalue = = 1) {$ (' #divProCity ul.headmenu li '). EQ (2). Hide (). siblings (). Show (); 
$ (' #divProCity '). Children (' div '). EQ (0). Show (). Siblings (' div '). Hide (); 
else {$ (' #divProCity ul.headmenu li '). EQ (2). Show (). CSS ("width", "70px"). AddClass ("Lidefault"). Siblings (). Hide (); 
$ (' #divProCity '). Children (' div '). EQ (2). Show (). Siblings (' div '). Hide (); 
} else {$ (' #btnImg '). attr ("Class", "btn_img1"); 
$ (' #btnImg '). attr ("name", "IMG1"); 
$ (' #divProCity '). CSS ("display", "none");  }} </script>

The logic is to first choose domestic or foreign, the triangle is the picture, not H5 canvas draw out, this kind of picture online many is.

1, I use the input type button as a picture container, with an IMG image unexpectedly out (maybe I water bar). Input has default Style button click the outside has a blue border, want to remove outline:none; don't write out-line like me.

2, feel themselves in the process of writing, like, by the triangle load all information, switch pictures, and then click the picture to close into. There are some logic is free expansion, do not foreign to the relevant foreign code deleted, to expand to add similar provinces and cities.

3, dynamic loading data is such as the province corresponding Div class named LiDiv1, its box structure

<div class= "lidiv1> <ul> <li></li> </ul> </div>
var ss =" <ul><li> Fuzhou Fuzhou </li><li> Fuzhou Fuzhou </li><li> Fu Fuzhou State </li><li> Fuzhou Fuzhou </li></ul> ";
$ ('. LiDiv3 '). html ('); Empty
$ ('. LiDiv3 ') before adding. html (ss);

The Dynamic Data SS can get the database data via AJAX through the background traversal stitching

var ss= <ul><li id= "01211014aop145" onclick= "Getli (This)" > Fujian Province </li></ul>

For example, the following is a. NET (write less low don't mind) upload him to the front end Ajax receives the returned value, directly append to $ ('. LiDiv3 '). HTML (ss);

if (ds!= null && ds. Tables.count > 0 && ds. Tables[0]. Rows.Count > 0) 
{strbuild.append ("<table id=\ tableshow\" class=\ "gridtable\" cellspacing= 
' 0 ' > "); 
Strbuild.appendformat ("<tr><div class=\" dialogtitle1\ ">" + title3+ "</div><tr>"); 
foreach (DataRow Dr in DS. Tables[0]. Rows) 
{ 
strbuild.append ("<tr id= '" + dr["VALUE"] + "' onmouseover=\" this.bgcolor= ' #FAEBD7 ' \ "Onmouseout=\" This.bgcolor= ' "onclick=\" clickonworkplace (this) \ ">"); 
Strbuild.appendformat ("<td >{0}</td>", dr["name"). ToString ()); 
Strbuild.append ("</tr>"); 
} 
Strbuild.append ("</table>"); 

To get the data, click Fujian Province can write the general click event, Background Stitching onclick= "Getli (This)"

It's written on the front.

function Getli (obj) { 
var id=$ (obj). attr ("id"); 
var text=$ (obj). text (); 
Can write Ajax through the province ID to get the data of the city 
}

The text ID of the province is then obtained and the ID and text are also loaded by the Click event to get the data to the city. In the stitching text to the top of the input box is the final result (this has not been written, very simple, lazy cancer attack did not want to write), the above text has been set to read only ReadOnly, said that only read about the difference between readonly and disabled, ReadOnly only to The input box is also valid for multiple text input boxes, and the text style does not change. Disabled basic trial with all elements, but be aware of its compatibility. The text box above sets the Runat property to facilitate the direct reading of data in the. NET background.