I have a list in SharePoint 13. The list is customized using Data table.Currently I have three filters with dropdown option. I want to select multiple option in the dropdown and show the result in the list. Below is the code used:

<div class="" style="float:right; padding:0px 5px 5px 0px;"><a href="javascript:resetFilters()">Reset filters</a></div>

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="theResults">

<th width="20%">Date</th>

<th width="20%">Category</th>

<th width="60%">Title and description</th>

<script type="text/javascript">

function loadTable(theFilter,flag) {
if(theFilter != '&$filter=') { 
theFilter += " and ";
theFilter += "Category ne ''";
//theFilter += "$orderby=Date";
// theFilter += "(SupportType eq 'none')&$orderby=sortorder";

var call = $.ajax({
url: strURL + theFilter,
type: "GET",
dataType: "json",
headers: {
   Accept: "application/json;odata=verbose"

call.done(function (data,textStatus, jqXHR) {
if(flag==true) {
   for (i = 0; i < fieldlist.length; i++) {
                  $( 'select[name="' + fieldlist[i][0]+ '"]' ).append( createFilters(data,fieldlist[i][0]) );        
   "bDestroy": true,
   "bProcessing": true,
   "sScrollY": "800px",
   "aLengthMenu": [[20, 40, 60], [20, 40, 60]],
   "iDisplayLength": 20,
   "aaData": data.d.results,
   "aaSorting": [[0, 'desc']],
   "aoColumns": [

      { "mData": "Date", "sDefaultContent": "" },
       //{ "mData": "Country_x0020_of_x0020_Origin", "sDefaultContent": "" },
       { "mData": "Category", "sDefaultContent": "" },
       //{ "mData": "Industry", "sDefaultContent": "" },
        { "mData": "Title0", "sDefaultContent": "" },

call.fail(function (jqXHR,textStatus,errorThrown) {
alert("Error retrieving Tasks: " + jqXHR.responseText);

var fieldlist = [ ["Country_x0020_of_x0020_Origin","Source"], ["Category"], ["Industry","Industry/Sector"] ]

var filterField = "";
var filterText = "";

/* SharePoint list URL*/
var strURL = "list_URL')/items?$top=1000";



I don't see your <select> elements anywhere, although I'm guessing that maybe they get added dynamically in the builddropdowns() function?

Certainly you do end up with some <select> elements at some point because you are selecting them with the line:

$( 'select[name="' + fieldlist[i][0]+ '"]' ).append( createFilters(data,fieldlist[i][0]) );

You could add the multiple attribute to the <select>s to get native HTML support for multiple selections, which would look like

<select id="mySelect" name="mySelect" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>

although that will change the rendering of the control from a drop-down menu to a kind of scrollable small textbox. You can see how that looks by going here and clicking the "try it yourself" button.

However, you are clearly already using jQuery, so you could consider using the jQuery plug-in library Chosen to get much slicker multiple select controls.

  • Thank you for the response. However, the dropdown does not show up on the page. I added the <Select> tag where the <script> tag ends. Not sure if I am adding it at the correct place :(. – Naidi Apr 20 '20 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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