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

I'm currently using the Jquery Chosen plugin:

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

My scenario is as follows:

  1. Create a form entry
  2. Store form entry in a database
  3. Edit form entry
  4. 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%' });

This is my code minus the data pull from C#

 $(document).ready(function () {

    var array = [];

    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
                    var data = JSON.stringify({
                        obj: {
                            id: incidentID


                        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(',');

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

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


                    function fnerrorcallback(result) {

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

enter image description here



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.