How to Implement the brushless newest linkage menu in parsing JS (1)

This article briefly introduces the linkage menu and JS Implementation of the select method for the brushless newest linkage menu. In fact, the implementation principle of the Linkage menu is very simple, this article describes in detail how to implement the linkage menu. Once we know the principle, we can easily create an infinitely interactive menu loaded from XML and database.

JS Implementation of the select method for the brushless newest linkage menu)

The linkage menu is the option in the next drop-down Box Based on the selected value in the previous drop-down box. A typical application is the provincial/municipal linkage menu, the city drop-down options are determined based on the province you choose. We often encounter similar requirements. I believe many new users are troubled by this problem.

In fact, the implementation principle of the Linkage menu is very simple. This article describes the implementation method of the Linkage menu in detail. Knowing the principle, we can easily create an infinite linkage menu loaded from XML and database.

Implementation of the Linkage menu:

1. Confirm the data format:

First, we will introduce the syntax for creating an Option:

Code:

 
 

  
  
varnewOption=newOption(optionText,optionvalue);  
  
  
 
 
 

According to the above syntax, we know that the select option is divided into optionText and optionvalue. optionText is the option we see in the drop-down box, while optionvalue is the actual submitted value. For example, if an option is "Beijing", the actual submitted value is "010 ".

To maintain consistency, we confirm that the options are in the following format:

Code:

 
 

  
  
{Txt: "option name", val: "option value "}
  
  
 
 
 

Then a rule group is:

Code:

 
 

  
  
VarchildArr = [];
  
  
ChildArr ['parent option value 1'] = [
  
  
{Txt: "option 1", val: "option value 1 "},
  
  
{Txt: "option 2", val: "option value 2 "},
  
  
{Txt: "option name 3", val: "option value 3 "},
  
  
...
  
  
{Txt: "option name n", val: "option value n "}
  
  
]
  
  
ChildArr ['parent option value 2'] = [
  
  
{Txt: "option 1", val: "option value 1 "},
  
  
{Txt: "option 2", val: "option value 2 "},
  
  
{Txt: "option name 3", val: "option value 3 "},
  
  
...
  
  
{Txt: "option name n", val: "option value n "}
  
  
]
  
  
 
 
 

The "parent option value" is the value selected from the parent drop-down list.

Note: The values in [] and {} are separated by commas (,), but the last value cannot be followed by commas (,). Otherwise, the syntax is incorrect, special attention should be paid to PHP programmers !!!