0

I was attaching fronted view and SharePoint designer view in screen please refer image and help me how to implement the codePlease see the image and help me

  • You need to use javascript(REST/JSOM) to update the list items on change of status selection. – Ganesh Sanap Dec 24 '18 at 14:17
  • Yes, then how can I implement – Divya Divya Dec 25 '18 at 8:38
0

You may use multiselect library for this requirement,here is sample demo script:

<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>

Update the CSS accordingly.

enter image description here

Result.

enter image description here

enter image description here

  • Hi @Lee_MSFT how can I add second box(that means inactive status select box) – Divya Divya Dec 25 '18 at 10:19
  • it's working fine but after refresh the fronted page false fields are display in first select dropdown list,but SharePoint DB is not changed – Divya Divya Dec 25 '18 at 11:52
  • If you don't got 'update complete' alert, try to debug the update logic(afterSelect/afterDeselect), as I tested the script in my local, it's working fine even reload page. – Lee_MSFT Dec 26 '18 at 1: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.