SharePoint: Extended DVWP-Part 2: cascade drop-down boxes using jQuery

Document directory

• Current problems
• Solution

It has been a few days since I started to explore DVWP. These topics are all centered on the build cascade drop-down box-that is, when you select a drop-down box, the following drop-down box is limited to the options.

The preceding Country/State is used as an example. When Country = USA is selected, only 50 United States and District of Columbia should be listed in States; When Country = Canada is selected, only 13 Canadian Provinces should be listed in States. We will use jQuery to implement such a drop-down box with cascading relationships.

Current problems

We have created an example list that contains the Countries and States website columns. The problem is as follows:

This is completely legal and can be saved to the database like this.

Unfortunately, although both columns are from the website bar, although the control of "possible" data is provided, it is meaningless to combine them. Alabama is not a province of Canadian.

In addition, because the data in the website column is automatically sorted, this problem is aggravated. For example, when selecting countries such as USA, Canada, and India, the options such as time-saving states, provinces, and territories will be mixed together.

This is why we need to implement cascading drop-down boxes.

Solution

In our solution, jQuery and Marc Anderson's jQuery Library for SharePoint Web Services (SPServices) are used ). Therefore, if you need to know more details in the code or other options of functions, please refer to the official website of the corresponding syntax. The procedure is as follows:

1. Add a Content Editor Web component (CEWP) to the page where DVWP is located)

2. In the WebPart attribute, click "Source editor ...".

3. paste the following jQuery script to the pop-up "text input-webpage dialog box ".

<Script src = "/_ layouts/Scripts/jquery-1.3.2.min.js" type = "text/javascript"> </script> <script src = "/_ layouts/Scripts/jquery. SPServices-0.5.6.js "type =" text/javascript "> </script> <script language =" javascript "type =" text/javascript "> $ (document ). ready (function () {$ (). SPServices. SPCascadeDropdowns ({relationshipWebURL: "/", // the URL of the website, which can be relative or absolute. Generally, the absolute address is more reliable. relationshipList: "Country-State Relationships ", // The 'display name' relationshipListParentColumn: "Countries" in the Link List, // The internal name of the parent column in the Link List: relationshipListChildColumn: "States ", // The internal name of the subcolumn in the Link List: relationshipListSortColumn: "States", // The internal name of the subcolumn in the Link List: parentColumn: "Countries ", // 'display name' childColumn: "States" in the parent column of the list being operated // 'display name' in the subcolumn of the list being operated '});}); </script>

Note:: For the Chinese name column,The name must contain letters without spaces.. Then, you can change it to the Chinese "display name" used for actual display ". In this way, you can directly use the internal name composed of letters at the time of creation. However, exceptions also occur. For example, in the first article in the drop-down box series, the internal name of the Categories column we created is categories1. Because the SharePoint website already has an internal column named Categories. So SharePoint automatically adds a number to the end. In this case, you can move the cursor over the corresponding column in the list settings to view the link address in the browser status bar. The field = value is the internal name of the column.

4. Modify the Script Reference address, list name, and column name based on your actual environment.

5. Click Save.

Now the States drop-down list is fully controlled by the Counties option:

Country = NULL

Country = Canada

Country = USA

Next time: To continue our journey to expand DVWP, we will add another cascade drop-down box to implement L3 cascade.

 

References

SharePoint: Extending the DVWP-Part 20: Cascading Dropdowns-Applying the jQuery