Chosen-select displaying multiple values from an array with one value

问题

I'm currently using the Jquery Chosen plugin: https://harvesthq.github.io/chosen/

It's great, but I'm having an unusual problem that I'm struggling to track down!

My scenario is as follows:

Create a form entry
Store form entry in a database
Edit form entry
Retrieve stored information from database and display it.

I can do steps 1-3 without any issues. The problem is introduced on step 4. When I return the values from the database and bind the data to the field, if there is only 1 value in the array, the field displays the value twice. If there is more than 1 value in the array then it displays the values as normal. Pictures below to make it clearer! :)

My code is below. The issue is within the section function fnsuccesscallback(data) { where I have several console.log items to check how many times I'm looping.

I've tried resetting the value of the chosen-select to empty at the start of each function call, but that hasn't helped:

newArray = [];
                    $(".chosen-select").chosen({ width: '100%' });
                    $('.chosen-select').val(newArray).trigger('chosen:updated');

This is my code minus the data pull from C#

 $(document).ready(function () {

    var array = [];
    console.log(array);

    getList();
    
    function getList() {

                //check if the incidentID is set to null, and don't make this call if it is as this is page load or please select.
                var incidentID = $('input[id$=IDIncident]').val();

                //if incidentID isn't undefined
                if(!!incidentID){
                    console.log(incidentID.val)
                    var data = JSON.stringify({
                        obj: {
                            id: incidentID
                        }
                    });

                    $.ajax({

                        type: "POST",
                        url: "update.aspx/getSelectedServices",
                        data: data,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: fnsuccesscallback,
                        error: fnerrorcallback
                    });

                    function btnclick() {

                    }

                    function fnsuccesscallback(data) {
                        //Convert the array to a string
                        var servicesString = JSON.stringify(data.d);
                        //strip the excess characters around the array
                        servicesString = servicesString.replace('\\\"]"', '');
                        servicesString = servicesString.replace('"[\\\"', '');
                        //Split the string into an array
                        //empty the array
                        array = [];
                        array.length = 0;
                        array = servicesString.split(',');
                        console.log(array);

                        //Array is currently empty - so setting it to empty
                        newArray = [];
                        $(".chosen-select").chosen({ width: '100%' });
                        $('.chosen-select').val(newArray).trigger('chosen:updated');

                        for (i = 0; i < array.length; i++) {
                            console.log("in loop");
                            console.log(i);
                            newArray[i] = $.trim(array[i]);
                        }

                        $('.chosen-select').val(newArray).trigger('chosen:updated');

                    }
                    function fnerrorcallback(result) {
                        alert(result.statusText);
                        console.log(result);
                    }
                }

            };
)};

<asp:ListBox ID="impactedServicesData" runat="server" AppendDataBoundItems="true" class="form-control incidentSelection impactedServicesData impactedServicesClass chosen-select" tabindex="8" multiple="">
                        </asp:ListBox>

来源：https://stackoverflow.com/questions/59068973/chosen-select-displaying-multiple-values-from-an-array-with-one-value

标签

javascript

jquery

arrays

jquery-chosen