0

Example:

I am running a computer shop.I want to create a custom list where one column is dependent to an other column.

For example if I select hp laptop, only hp models should be the next range of choice and if select dell laptop only dell models should be the next range of choice.

4
  • 3
    This is called "cascading dropdowns", you find good resources by googling that Jul 7, 2015 at 10:39
  • all cascading dropdowns needs jscripting and i am not good at it!
    – Jenny
    Jul 7, 2015 at 13:43
  • Well most dynamic rendering do use javascript, see it as a chance to learn ;) Jul 7, 2015 at 13:44
  • Just a quick question. The list you have, have you customized it in InfoPath at all? I would like to find out a bit more info from you as i may have a solution that might help. Jul 9, 2015 at 7:11

3 Answers 3

0

What @Robert Lindgren mentioned is the correct answer. If you don't want to use cascading dropdowns, another choice would be to create lookup columns pointing to data in the same list. You can then add custom logic using jquery / javascript to hide or show the respective lookup columns.

0

You can create "Cascading DropDown" to meet your needs (only work on theSharePoint classic mode)

Please following steps:

1.Create the first list named "ComputerType"

enter image description here

2.Create the second list named "Products" and add a Lookup column in the list

enter image description here

3.Create the third list named "ComputerShop" and add two Lookup columns in the list

enter image description here

4.On the "ComputerShop" list and swith to classic mode, select LIST >> Form Web Parts >> Default New Form

enter image description here

5.On the Create New Items page, click on "Edit page" in the Gear icon

6.On the Edit page, add the Script Editor web part.

enter image description here

7.On the Script Editor web part. click EDIT SNIPPET and paste the below javascript code.

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
    
        HillbillyCascade({
            parentFormField: "Department", //Display name on form of field from parent list
            childList: "Employee", //List name of child list
            childLookupField: "Title", //Internal field name in Child List used in lookup
            childFormField: "Employee", //Display name on form of the child field
            parentFieldInChildList: "Department" //Internal field name in Child List of the parent field
        });
    
    });
    
    function HillbillyCascade(params)
    {

        var parent = $("select[Title='"+params.parentFormField+"'], select[Title='"+
            params.parentFormField+" Required Field']");
        
        $(parent).change(function(){
            DoHillbillyCascade(this.value,params);        
        });
        
        var currentParent = $(parent).val();
        if (currentParent != 0)        
        {
            DoHillbillyCascade(currentParent,params);
        }
        
    }
        
    function DoHillbillyCascade(parentID,params)
    {
    
        var child = $("select[Title='"+params.childFormField+"'], select[Title='"+
            params.childFormField+" Required Field']," +
           "select[Title='"+params.childFormField+" possible values']");
        
        $(child).empty();
    
        var options = "";

        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+params.childList+
                "')/items?$select=Id,"+params.childLookupField+","+params.parentFieldInChildList+
                "/Id&$expand="+params.parentFieldInChildList+"/Id&$filter="+params.parentFieldInChildList+
                "/Id eq "+ parentID,
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }      

        });
        call.done(function (data,textStatus, jqXHR){
        
            for (index in data.d.results)
            {
                options += "<option value='"+ data.d.results[index].Id +"'>"+
                    data.d.results[index][params.childLookupField]+"</option>";
            }
            $(child).append(options);

        });
        call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving information from list: " + params.childList + jqXHR.responseText);
            $(child).append(options);

        });        
    }
    
</script>

enter image description here

8.Stop Editing and add new item

enter image description here

For more information, please refer to this post.

-1

by jQuery:

  1. create list for lookup with fields: parent id and childID/name

  2. create second list with fields: id,lookup (from first list). the lookup field can filtered by jQuery code $().SPServices.SPCascadeDropdowns()

see details in links... one and two

1
  • Please, do not post link-only answers! You should include relevant information from the links as quotes in your answer. Jul 7, 2015 at 11:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.