javascriptjquerysharepoint-2013sharepoint-jsom

How to add status "active" or "Inactive" in sharepoint list items. By using sharepoint designer?


i have a two select dropdowns and first has get the items from sharepoint list and when i click the move button selected item moved to second dropdown and when i click the save button status of sharepoint list is dynamically changed.if item is there in first dropdown status is "active" . If item is in second dropdown item status is "Inactive".please tell me how can i do that.?

i did this code only .soo,please tell me how can i do?

$(document).ready(function(){
ExecuteOrDelayUntilScriptLoaded(retrieveListItems,'sp.js');
});



var ItemContainer = { ItemList: [] };
 function retrieveListItems() {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('States');
    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('sct1');
    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;
        }
    }
}



//for button function



   $(function(){function moveitems(origin,dest){
$(origin).find(':selected').appendTo(dest);
}
$("#move").click(function(){
moveitems('#sct1','#sct2');
});
});   

i want like this type


Solution

  • The requirement seems so close as this one I tested, you may check my test solution.

    <select id='selectItems' multiple='multiple'></select>
        <!-- Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="/SiteAssets/MultiSelectjQLib/multi-select.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
        <script src="/SiteAssets/MultiSelectjQLib/jquery.multi-select.js"></script>
        <script type="text/javascript">
            ExecuteOrDelayUntilScriptLoaded(custom, "sp.js");
            function custom() {
                var clientContext = new SP.ClientContext.get_current();
                //update list as your list
                var list = clientContext.get_web().get_lists().getByTitle("MultiSelectTest");
                //get the first item only, you may update the logic per you requirement
                var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
                clientContext.load(items);
                clientContext.executeQueryAsync(
                    function () {
                        var listItemEnumerator = items.getEnumerator();
                        while (listItemEnumerator.moveNext()) {
                            var oListItem = listItemEnumerator.get_current();
                            var _Title = oListItem.get_item('Title');
                            var _Status = oListItem.get_item('Status');
                            var _ID = oListItem.get_item('ID');
                            if (_Status) {
                                $('#selectItems').append($("<option></option>").attr("value", _ID).text(_Title));
                            } else {
                                $('#selectItems').append($("<option selected></option>").attr("value", _ID).text(_Title));
                            }
                        }
                        $('#selectItems').multiSelect({
                            afterSelect: function (values) {
                                alert("Select value: " + values);
                                var oListItem = list.getItemById(values);
                                oListItem.set_item('Status', false);
                                oListItem.update();
    
                                clientContext.executeQueryAsync(
                                   function () {
                                       alert('update complete');
                                   },
                                    function (sender, args) {
                                        console.log(args);
                                    }
                                );
                            },
                            afterDeselect: function (values) {
                                alert("Deselect value: " + values);
                                var oListItem = list.getItemById(values);
                                oListItem.set_item('Status', true);
                                oListItem.update();
    
                                clientContext.executeQueryAsync(
                                   function () {
                                       alert('update complete');
                                   },
                                    function (sender, args) {
                                        console.log(args);
                                    }
                                );
                            }
                        })
                    },
                        function (sender, args) {
                            console.log(args);
                        })
            }
        </script>