A provincial and county three-level linkage of the Echo (with database) __ Database

Source: Internet
Author: User

no nonsense, on the code! Big God Don't spray ...

<!--JSP code-->
<tr>
                <td> address:</td>
                <!--First level: Province-->
                <td><select Id= "province" Name= "province" onchange= "F1 ()" >
                        <option>---Please select---</option>
                        <!--level Two: City- >
                </select> <select id= "City" Name= "City" onclick= "F2 ()" >
                        <option>---Please select---</ Option>
                  <!--level III: County-->
                </select> <select name= "Country" id= "Country" >
                        <option >---Please select---</option>
                </select></td>
            </tr>
JS Code/* PID is his parent ID of the province's PID is 1, so the background pass the time is directly 1; returns a JSON; everyone knows.
            This gets the first level of */$ (function () {$.post ("Getsjld.action", {pid:1}, function (data) {
                        for (var i in data) {var op = $ ("<option value= '" +data[i].id+ "' >" + data[i].cityname
                + "</option>");
            $ ("#province"). Append (OP);
}, "JSON"})/* Below I will explain why there are city and country (for: ECHO) and you can see I have a judgment after the append;
That is used when modifying the echo; The mere appearance is that three-level linkage is not used F2 () The same reason gets the second level of $ ("#province") through the first level. Val () is the first level ID; NOTE NOT PID!!! */function F1 (city,country) {$.post ("Getsjld.action", {pid: $ ("#province"). Val ()}, Fu
            Nction (data) {$ ("#city"). empty (); for (var i in data) {var op = $ ("<option id= ' City" +data[i].id+ "' value= '" +data[i].id+ "' >" + data[i
                ].cityname + "</option>");
     $ ("#city"). Append (OP);                   if (city!=null) {$ ("#city option"). each (function () {
                                if ($ (this). Text () ==city) {$ (this). attr ("selected", true)
                        } f2 (country)})  The "JSON"}}//is obtained through the second level to the third level function F2 (country) {$.post ("getsjld.action").
            {pid: $ ("#city"). Val ()}, function (data) {$ ("#country"). empty ();
                for (var i in data) {var op = $ ("<option>" + data[i].cityname + "</option>");
                $ ("#country"). Append (OP); if (country!=null) {$ ("#country option"). each (function () {if ($) (
                     This). Text () ==country) {$ (this). attr ("selected", true)           }}}}}, "JSON"} 

JS to obtain the value of three-level linkage: The use of splicing method

var ADR = "";
ADR + = $ ("#provinceoption: Selected"). Text () + ""
                        + $ ("#city option:selected"). Text () + ""
                        + $ ("#country option: Selected "). Text ();

You can see that I added a + "" to the back of each value.
This is for the purpose of modifying the time to take a convenient value. Split directly with Split ("") on the OK;

The above is added
Effect as shown

Add success after the effect as shown


Because I added a "" at the top when I took the value. All additions to the database will be an interval

The next step is to modify the echo.

First we're going to get the value from the database
Because I did it with Esayui, so my value is this.


The value is not to mention. Everyone will!
So now city is the value of the address we've taken.

      /* mentioned above, when it is worthwhile, because the added time is "", separated Add,
         so we take the value after the  split ("")  cut   
         citys[0] It is the value of the province
         Citys[1] is the value of the city C6/>CITYS[2] is the value of the county

           *  /var citys=city.split ("");

              $ ("#province option"). each (function () {/
        * traversal save pull box; Determines whether the Drop-down box value is the same as the value of the province being fetched;
          The same is selected, followed by the second level; Above all you should see the
          F1 () represents the second level;   So after the selection of the F1 ()
          and the city and county values passed; 
         (The value of the county is not in the F1 (), is to give F2 () pass over)
          */
                  if ($ (this). Text () ==citys[0]) {
                     $ (this). attr ("selected", true);
                    var Sheng = $ (this). Val ();
                    F1 (citys[1],citys[2])
                 }}
            )  

Everybody this time back to look at the second and third level linkage that piece of the Judgment code
As shown in figure:

When you write this, you should know why you sent the city and the Country over.

The third level is the same, and it can be echo!

All right! Modify the echo is done!
Effect as shown:

The background code is a single table query
SELECT * from city WHERE pid = #{pid}
#{pid} is the value of your passing!

Below is the table structure!
This Baidu a big push! It's the same way! Just watch the table structure and know how to take the value.

CREATE TABLE City (
ID Int (one) not NULL DEFAULT ' 0 ',
PID Int (one) DEFAULT NULL,
CityName varchar (255) CHARACTER SET UTF8 DEFAULT NULL,
type int (one) DEFAULT NULL,
PRIMARY KEY (ID)
) Engine=innodb DEFAULT Charset=utf8 collate=utf8_unicode_ci;

All data click link Download
Specific link: http://pan.baidu.com/s/1qXSHmc0 Password: VCAA
There are SQL files inside!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.