Search This Blog

Saturday, September 12, 2015

Fill Dropdown From List Using JSOM /ECMA Script


 
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script lang="ecmascript" type="text/javascript">
 var ItemContainer = { ItemList: [] };
 function retrieveListItems() {
        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle('Country');
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');        
        this.collListItem = oList.getItems(camlQuery);
        clientContext.load(collListItem);
        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onListDataLoadQuerySucceeded),
            Function.createDelegate(this, this.onListDataLoadQueryFailed));
    }

  function onListDataLoadQuerySucceeded(sender, args) {
     
        var listItemInfo = '';
        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            var tempItem = { ID: oListItem.get_id(), Value: oListItem.get_item('Title') };
            ItemContainer.ItemList.push(tempItem);
        }
       fillDropDown();
    }
   
    function onListDataLoadQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }

  function fillDropDown() {
        var ddlCategory = document.getElementById('ddlCategory');
        if (ddlCategory != null) {
            for (var i = 0; i < ItemContainer.ItemList.length; i++) {
                var theOption = new Option;
                theOption.value = ItemContainer.ItemList[i].ID;
                theOption.text = ItemContainer.ItemList[i].Value;
                ddlCategory.options[i] = theOption;
            }
        }
    }

 
</script>
<select id="ddlCategory"></select> <br />
<input type="button" value="GetData" onclick="retrieveListItems();" />


2 comments: