The linkage of the dropdown box is realized by toggling the JS file referenced by the page.

Among the previous projects, the highest role level in the page was the city level, and a page was a display of information about a city.

Therefore, a JS file is created for each city, in which information about the city is stored,

In this we focus on JS files stored in the county and county information, Beijing as an example, its district information

var Districts=[{name: ' Changping ', index:0},{name: ' Chaoyang ', index:1},{name: ' Chongwen ', index:2},{name: ' Daxing ', index:3},{name: ' Dongcheng ', index:4} ];

since the previous page loads a city's JS file at most, districts is simply defined as a global variable here.

Now you need to make a summary of the page, which has the city drop-down box and county drop-down box, and need to implement two drop-down box linkage.

Implementation method:

because the city JS file global variable Districts naming conflict, considering the current situation of the project, the way I take it is: Whenever you select a city in the dropdown box, you remove the previous city JS text

, loading the JS file of the current city, and filling the county and county information into the county drop-down box. City drop-down box The method code that fires after selecting a city is as follows:

       //City JS Script        varCityscript; //Get County drop- down list        varGetdistrict =function () {                        varCity = $ ("#CitySelect"). Val (); //To convert a relative path to an absolute path              varCitybasepath = ' @ContentMap. Jscontent ("Js/city/{script}") '; if(cityscript) {document.body.removeChild (cityscript); } cityscript= document.createelement ("Script"); Cityscript.type= "Text/javascript"; Cityscript.charset= "gb2312"; CITYSCRIPT.SRC=citybasepath.replace ("{script}", city+ "City.js");            Document.body.appendChild (Cityscript); //give time to parse JS file and then fill County drop-down boxWindow.settimeout (filldistrict, 100); };

It is important to note that:

1. Define a variable cityscript to hold the script object that cites the city JS file, so it is convenient to remove the previous JS file when switching the city.

2.contentmap.jscontent is a method of turning a relative path into an absolute path (the project uses ASP. NET MVC), and the "{script}" string is used as a placeholder because you cannot

The background method contentmap.jscontent the JS variable and will have the suffix of the version number after it is converted to an absolute path.

3. After referencing the new JS file, give the browser enough time to parse the file before populating the county drop-down box.

The method code that fills the county drop-down box is very basic, as follows:

  var  filldistrict = function   () { if   (districts) {                $ ( "#DistrictSelect"  "#DistrictSelect"). Append ("<option index= '-1 ' value= ' > Counties </option>"                );  for  (var  i = 0; i < Districts.length; I++) {$ ( "#DistrictSelect"). Append ("<option index=" + District S[i].index + "' value= '" + districts[i].name 

                      + ">" + districts[i].name + "</option>");                }             Else {                alert ("failed to get city counties data! ");            }        };

Summarize:

In general, the frequent switching of JS file reference is not the right way, but the current project environment a quick implementation of the function of compromise.

If the names of county and county information variables in each city are differentiated by city and placed in a JS file, it will be easier and more enjoyable to achieve them.

This also reminds us that when designing a project, we should fully consider the possible future requirements, more reasonable design variables and file structure.

(I look forward to your valuable comments and suggestions from the great God)

The linkage of the dropdown box is realized by toggling the JS file referenced by the page.