The company's provincial, municipal and county data are quite terrible. It is used to generate IDs from the ehr system to match. For example, Fujian Province corresponds to ID 01211014AOP145, and the city also corresponds to an ID, and then the districts and counties ignore it. Then I found a bunch of resource plug-ins online. The feeling was not applicable, so I decided to write one myself. Because I don’t know how to make the interface that is half a bucket of water, which format, style, and color matching. I silently searched for JD.com, Amazon, Taobao, Dangdang and other people about how the provinces, cities and districts were done. The picture is as follows:
Finally, I combined it into the following figure:
Let's talk about the source code without much nonsense:
<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:
<head> <title>Scalability of provincial and municipal linkages</title> <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script> </head> <body> <label>Select whether to go abroad: </label> <input type="radio" name="radio1" value="1" />Domestic<input type="radio" name="radio1" value="2" />Foreign<br /><br /> <label>Query provincial and municipal linkages: </label> <input type="text" id="txt_proCity" onkeyup="GetOutCounty()" readonly="readonly" runat="server" /> <input type="button" id="btnImg" name="img1" onclick="changeImg()" /><br /> <label>Show location: </label><br /> <div id="divProCity"> <ul> <li>Province</li> <li>City</li> [html] view plain copy<li>Foreign</li> </ul> <div> <ul> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou</li> <li>Fujian</li> <li>Anhui</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> <li>Fuzhou</li> </div> <div> <p style="text-align:center;color:#F60"><strong>Please select the province first! </strong></p> </div>
script:
<script type="text/javascript"> $(document).ready(function () { $('#divProCity ul.headMenu li').click(function () { var index = $(this).index(); //Click abroad invalid if (index == 2) { return false; } $(this).addClass("liDefault").siblings().removeClass("liDefault"); $('#divProCity').children('div').eq(index).show().siblings('div').hide(); }); }) //Select domestic and foreign $("[name$=radio1]").click(function () { var value = $(this).val(); //When changing foreign countries, reset the value of the province and city to empty, restore the icon, close the bullet layer, and determine whether the input box can be edited $("input[id*=txt_proCity]").val(''); $('#btnImg').attr("class", "btn_img1"); $('#btnImg').attr("name", "img1"); //$('#divProCity').css("display", "none"); if (value == 2) {//Foreign $('#txt_proCity').removeAttr("readonly"); } else { $('#txt_proCity').attr("readonly", "readonly"); } }) //Full query function GetOutCounty() { //border: 1px solid #d3d3d3;background: #f6f6f6;alternative 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"); //Tag the switch image //Fuzzy query related code var ss = "<ul><li>Fuzhou Fuzhou</li><li>Fuzhou Fuzhou</li><li>Fufuzhou Prefecture</li></ul>"; $('.liDiv3').html(''); $('.liDiv3').html(ss); } //Click the right button on the home and abroad to load function changeImg() { var _selectValue = $("input:checked[name$=radio1]").val(); if (_selectValue == "" || _selectValue==undefined) { alert("Please select whether to go abroad first!"); 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 and 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 choose domestic or foreign first. The triangle is a picture, not drawn by h5 canvas. There are many such pictures on the Internet.
1. I use the input type button as the picture container, but I can't even get it out with img (maybe I'm watering). Input has default style button click on the blue border outside, remove outline:none; do not write it out-line like me
2. Feel like writing in the process-oriented manner, press the triangle to load all the information, switch the picture, click the picture and close it. Some logic in it is to expand freely. If you don’t want foreign codes, delete foreign codes, and add similar provinces and cities to expand.
3. Dynamic loading of data is for example, the corresponding div class name of the province is liDiv1, and its box structure
<div<ul><li>Fuzhou Fuzhou</li><li>Fuzhou Fuzhou</li><li>Fufuzhou</li><li>Fufuzhou</li></ul>";$('.liDiv3').html(''); //Clear $('.liDiv3').html(ss);Dynamic data ss can be obtained through ajax and traversed through background traversal.
var ss= <ul><li id="01211014AOP145" onclick="getLi(this)" >Fujian Province</li></ul>
For example, the following is the writing method of .net (don't mind if you write it low) and pass it to the front-end ajax to receive the returned value, and directly append to $('.liDiv3').html(ss); to obtain dynamic data
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>"); }Get the data, click Fujian Province to write a general click event, and the background splicing onclick="getLi(this)"
Write it on the front end
function getLi(obj){ var id=$(obj).attr("id"); var text=$(obj).text(); //You can write ajax through the province id to obtain the city's data}Then, the text id of the province is obtained, and the data of the city can be obtained through the click event. The same loaded id and text. The text splicing to the top of the input box is the final result (this has not been written yet, it is very simple, I don’t want to write it when I have lazy cancer attacks). By the way, the above text has been set to read-only readonly. When it comes to read-only, we have to talk about the difference between readonly and disabled. readonly is only valid for input boxes and multiple text input boxes, and the text style will not be changed. disabled basic trial with all elements, but be aware of its compatibility. The runat attribute is set in the text box above to facilitate the .net background to read data directly.