Teach you a day to play JavaScript (eight)--use JavaScript to complete the effect of provincial and municipal linkage __java

using JavaScript to complete the city-province linkage effect

The actual development will probably always encounter such a demand: on the registration page there are two Drop-down list boxes, the left province of the Drop-down list box in the value of a change, the right side of the city Drop-down list box in the value of the change, that is, the provinces and cities linkage. The effect is similar to the following:

To use JavaScript to accomplish the effects of a provincial-city linkage, you first need to know the following: syntax for creating arrays in JavaScript
OnChange events in JavaScript
The Drop-down list box changes the event. To complete the effect of linkage between provinces and cities, it is necessary to have two Drop-down box, and then listen to a drop-down box of the onchange event, in the value of the change, based on the value of the change to control the value of the Drop-down box behind. Operation of Dom in JavaScript--creating elements and adding elements

Knowing the above three points, I'll use JavaScript to do the following: Create an HTML file to determine the event: OnChange Event Trigger function, write code in function to get information to selected province To obtain the data of the city in the corresponding array according to the information of the selected province. Create elements, create text, and finally add elements to the second list

I am in "case six: Use JS to complete the provincial and municipal two-level linkage effect." In the HTML page, two Drop-down list boxes representing provinces and cities are picked up:

<tr>
    <td> birthplace </td>
    <td>
        <select id= "province" Name= "province" onchange= " Changecity (this.value) ">
            <option value=" ">-Please select-</option> <option value=
            " 0 "> Zhejiang province </ option>
            <option value= "1" > Jiangsu Province </option>
            <option value= "2" > Hubei Province </option>
            <option value= "3" > Hebei Province </option>
            <option value= "4" > Jilin Province </option>
        </select>
        <select id= "City" name= "City" >
            <option>-Please choose-</option>
        </select>
    </td>
</tr>

Then write JavaScript code to complete the effect of the provincial linkage:

<script> function Changecity (value) {//obtain information to the selected province var city = document.getElementById ("city");  ///Clear the contents of the second list for (var i = City.options.length i > 0; i--) {city.options[i]
        = NULL;

        * *///Empty the contents of the second list can also be written in the following line of code city.options.length = 1;
        alert (value); for (var i = 0; i < arrs.length i++) {if (value = = i) {//Get all city info for (var j = 0; J < Arrs[i].length; J + +)
                    {//alert (arrs[i][j]); Create element var opEl = document.createelement ("option"); <option></option>//Create text node var textnode = document.createTextNode (
                    ARRS[I][J]);
                    Adds the contents of the text to the OPTION element Opel.appendchild (Textnode);
              Add the option element to the second list city.appendchild (opEl);  {}}}} </script> 

For readers to see the source code, please refer to teach you a day to play JavaScript (eight)--use JavaScript to complete the effect of provincial and municipal linkage. Summary built-in objects in JavaScript

The built-in objects in JavaScript are:

I'll take a look at the common methods of these objects a little bit below. Array
Array object's methods:
Boolean
Method of a Boolean object:
Date
Method of Date Object:

Pay attention to this method of gettime (), which in some places has its wonders. Math
Method of the Math object:
String
The method of a string object is essentially similar to those of the string class in Java. The methods of a string object are:

More commonly used methods have been used in red boxes. global functions in JavaScript

The global functions in JavaScript are:

Take a look at the following global functions: parseint ()
Parses a string and returns an integer. For example, parseint ("11"); Parsefloat ()
Parses a string and returns a floating-point number. For example, parsefloat ("32.09"); Decoding
decodeURI () decodeuricomponent (): Some special characters can be decoded and encoded
encodeURI () encodeURIComponent (): Some special characters can be encoded

Eval
Execute a piece of content as a JavaScript code. For example:

var sss = "alert (' aaaa ')";
eval (SSS);