Post
Ask Question

DropDown And Dependent Dropdown For SharePoint

  1. <html>  
  2. <style type="text/css">  
  3. span.note {  
  4.         font-size: 140%;  
  5.         color: red;  
  6.     }  
  7.   
  8.     .textboxclass {  
  9.         width: 300px;  
  10.     }  
  11. }  
  12. div#AddListData {  
  13.     margin-left: 200px;  
  14.     border: 0px outset;  
  15.     width: 600px;  
  16.     margin-top: -40px;  
  17.     background-color: #f3e7e7;  
  18. }  
  19. td {  
  20.     font-size: 15px;  
  21. }  
  22. table#AddLeaveTable {  
  23.     padding-left: 10px;  
  24.     margin-left: 75px;  
  25.     margin-top: 5px;  
  26.     margin-bottom: 5px;  
  27.     border-collapse: separate;  
  28.     border-spacing: 15px;  
  29. }  
  30. </style>  
  31. <script type="text/javscript"> $(function () { var ddlSample=""; var DlJob=""; var Ownurl = "URURL/_api/web/Lists/getByTitle('products')/items?select=Title,ID"; $.ajax({ url: Ownurl, headers: { Accept: "application/json;odata=verbose" }, async:false, success: function (data) { var items = data.d.results; if (data.d.results.length > 0) { for (var i = 0; i  
  32.     < data.d.results.length; i++) { if (data.d.results[i].Title!=n ull) { var StrJob=data.d.results[i][ "Title"]; DlJob+='<option value=' +data.d.results[i].ID+ '>'+StrJob+ '</option>';}} ddlSample='<select id="txtlev"> <option value=0>Select</option> ' +DlJob+ ' </select>'; $( "#txtlev").html(ddlSample); } function jsFunction(value) { var val=value; var ddlSamples="" ; var DlJobs="" ; var Ownurl="URURl/_api/web/Lists/getByTitle('SubProducts')/items$select=Title,ID,Product/ID,Product/Title&$expand=Product/ID&$filter=Product/ID%20eq%20" +val+ ""; $.ajax({ url: Ownurl, headers: { Accept: "application/json;odata=verbose" }, async:false, success: function (data) { var items=d ata.d.results; if (data.d.results.length> 0) { for (var i = 0; i  
  33.         < data.d.results.length; i++) { if (data.d.results[i].Title!=n ull) { var StrJobs=data.d.results[i][ "Title"]; DlJobs+='<option value=' +StrJobs+ '>' +StrJobs+ '</option>';console.log(DlJobs);}} ddlSamples='<select id="category"><option value="0">Select</option>' +DlJobs+ '</select>'; $( "#category").html(ddlSamples); } },eror: function (data) { alert( "An error occurred. Please try again."); } }); } function CreateListItem() { var clientContext=n ew SP.ClientContext( 'URURL'); var List=c lientContext.get_web().get_lists().getByTitle( 'MasterList'); var itemCreateInfo=n ew SP.ListItemCreationInformation(); this.ListItem=L ist.addItem(itemCreateInfo); var title=document.getElementById( "adtitle").value; var category=document.getElementById( "txtlev").value; var subcategory=document.getElementById( "category").value; ListItem.set_item( 'Title',title); ListItem.set_item( 'category',category); ListItem.set_item( 'subcategory',subcategory); ListItem.update(); clientContext.load(ListItem); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded() { alert( 'Success'); } function onQueryFailed(sender, args){ alert( 'Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } </script>  
  34.   
  35.             <body>  
  36.                 <div id="AddListData">  
  37.                     <table id='AddLeaveTable'>  
  38.                         <div>  
  39.                             <tr>  
  40.                                 <td> Ad Title</td>  
  41.                                 <td><input type="text" id="adtitle" /> </td>  
  42.                             </tr>  
  43.                         </div>  
  44.                         <tr>  
  45.                             <td>Category</td>  
  46.                             <td> <select id="txtlev" style="width: 99%; height: 90%" onmousedown="this.value='';" onchange="jsFunction  
  47. (this.value);">  
  48. <option value=0>Select</option>  
  49. </td>  
  50. </tr>  
  51. <tr> <td>subcategory</td><td><select name="category" id="category"><option value=0>Select</option></select> </td>  
  52.                         </tr>  
  53.                         <tr>  
  54.                             <td></td>  
  55.                             <td> <input type='button' id='btnSubmit' onclick="CreateListItem()" value='Submit' /></td>  
  56.                         </tr>  
  57.                     </table>  
  58.                 </div>  
  59.             </body>  
  60.   
  61. </html>  
Here i am Using Products as my 1st list whereTitle,ID as their Fields. SubProducts as my 2nd list where Title,ID as their Fields. MasterList as 3rd list(it for storing values ).

Step 1

Include Min.js

Step 2

Check data.d.results.length > 0) If its True for 1st dropdown fetch the id,title using RestQuery,Itterate those results(data.d.results) using for Loop, and Stores data.d.results[i]["Title"]; in variable StrJob..
  1. DlJob+='<option value='+data.d.results[i].ID+'>'+StrJob+'</option>';}}  
The above function stores the option values from data.d.results and Stored in Variable DlJob again Check (data.d.results[i].Title!= null) If True create Dropdown values Using Below Code,
  1. ddlSample='<select id="txtlev"> <option value=0>Select</option> '+DlJob+' </select>';   
After that append the above created dropdown values(ddlSample) in ur html dropdown(select id="txtlev') using below Code
  1. $("#txtlev").html(ddlSample)  
Step 3

For 2nd Dropdown(dependent DropDown) Create Seperate function(function jsFunction(value)) As Like 1st Dropdown do the same Steps again,but here we are using lookup field from another list so we want to expand that (i.e.)(URURL/_api/web/Lists/getByTitle('SubProducts')/items$select=Title,ID,Product/ID,Product/Title&$expand=Product/ID&$filter=Product/ID%20eq%20"+val+"";))

Step 4
  1. function CreateListItem() {  
  2.     var clientContext = new SP.ClientContext('URURL');  
  3.     var List = clientContext.get_web().get_lists().getByTitle('MasterList');  
  4.     var itemCreateInfo = new SP.ListItemCreationInformation();  
  5.     this.ListItem = List.addItem(itemCreateInfo);  
  6.     var title = document.getElementById("adtitle").value;  
  7.     var category = document.getElementById("txtlev").value;  
  8.     var subcategory = document.getElementById("category").value;  
  9.     ListItem.set_item('Title', title);  
  10.     ListItem.set_item('category', category);  
  11.     ListItem.set_item('subcategory', subcategory);  
  12.     ListItem.update();  
  13.     clientContext.load(ListItem);  
The above Code is Used to Save the Data in the List ..This is Written using ECMA Script

Step 5
  1. <select id="txtlev" style="width: 99%; height: 90%" onmousedown="this.value='';" onchange="jsFunction  
  2. (this.value);">  
The avove is the Heart of the concept for Dependent Dropdown list,if we click 1st dropdown and select some value,that values trigger to function jsFunction(value) regarding that value 2nd dropdown intialize(its acts as a filter)

Step 6

Create Necessary Html Fields (Buttons, TextBox ) for User Input..

Step 7

Save the Entire file as .html file and Call it to ur Content editor Webpart...
Next Recommended Reading Binding Dropdown Values From SharePoint List Choice Column Using SPfx And Pnpjs