SharePoint 2013 linked drop-down list using check items

Source: Internet
Author: User

A drop-down box is often used when using the Sharepoint list. For some special requirements, a linked drop-down box is used. This field is not used by default in Sharepoint, we need to find a solution.

Here, we will introduce how to use the jquery + JavaScript client object model for implementation. Let me briefly introduce the entire implementation process.

1. Create the basic list citylist. The city name is saved and the default field title is used;

2. For all the columns in the citylist, I changed the name of the title field to the city name, for example:

3. Create the basic list arealist to save all zones and associated cities, for example:

4. All columns in the list arealist. Here, the title is the name of the Region, and cityname is the item to be viewed and associated with the city list, for example:

5. Detailed attributes of cityname, such:

6. Create a list for display. The city column is from citylist and the type item is checked. The area column is from arealist and the type item is checked. By default, a new project is created and the city is added as follows:

7. By default, a new project is created. The effect of the "area" column shows all the content of the "area" column:

8. On the New Page, add a Content Editor and add the following code:

<SharePoint: scriptlink name = "sp. JS "runat =" server "OnDemand =" true "localizable =" false "> </SharePoint: <script language = "JavaScript" src = "/_ layouts/15/jquery/jquery-1.7.1.js" type = "text/JavaScript"> </SCRIPT> <script language = "Javascript "src ="/_ layouts/15/jquery. SP. linyuservice. JS "type =" text/JavaScript "> </SCRIPT> <SCRIPT type =" text/JavaScript ">$ (document ). ready (function () {spcustomservicegetselect ("city", "area", "arealist", "cityname", "title"); // source parent field name, source sub-field name, source list, parent field name, child field name}) </SCRIPT>

9. Open the new project page again and find that it is different from the first one. Here, the area column is only none, for example:

10. Select Beijing in the "city" column, for example:

11. Check the content in the area column. It is only a few districts in Beijing. It is no longer all districts. This indicates that our script has taken effect, for example:

12. When we select Chongqing, it is displayed as none because the test data does not add a zone for Chongqing, for example:

13. view the JS script I wrote. This is all the referenced scripts. My linked item is implemented based on this script and the jquery library, for example:

Summary

When I think of a linkage drop-down box, the first thought is jquery implementation. In Sharepoint, many foreground applications are very convenient to use jquery. Of course, I will append the script and can use it if I am interested.

When writing a script, I try to encapsulate it into a class library and call it at the front end. If you have special needs, download it and modify it.

Attachment script file

Http://download.csdn.net/detail/linyustar/7562499

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.