Выбранный плагин jquery не обновляется с помощью <optgroup>

Question

Странная ситуация здесь происходит. Я использую плагин jquery selected.js. Я обновляю выпадающий список, который уже есть на странице, с помощью вызова ajax и jquery. вот немного примера кода. вот мое раскрывающееся меню, как показано на странице.

<div id="singleDropDownBlock" style="display: none">

    <select id="SingleDropDown"  class="chzn-select" data-placeholder="Choose your start Location" onchange="GetFromNodeValue();">
        <!--<option>select a strating locnation based on category.</option>-->

    </select>

</div>

Это код, загружающий значения в выпадающий список с помощью jquery.

     function GetResultsFromMultiCategory(data)
     {


             for (i = 0; i < data.d.categories.length; i++)
             {
                 //console.log(data.d.categories[i].catNode);

                 if (data.d.categories[i].catNode == "0")
                 {

                     $('#SingleDropDown').append("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
                     console.log("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
                     //onOrOff = false;  </optgroup>
                 }
                 else
                 {
                     $('#SingleDropDown').append("<option " + "value=" + data.d.categories[i].catNode+ ">" + data.d.categories[i].catLoc + "</option>");
                     console.log("<option " + "value='" + data.d.categories[i].catNode + "'>" + data.d.categories[i].catLoc + "</option>");

                     if (typeof(data.d.categories[i + 1]) != "undefined")
                     {

                         if (data.d.categories[i + 1].catNode == "0")
                         {
                             $('#SingleDropDown').append("</optgroup>");
                             console.log("</optgroup>");

                         }//end second if
                     }//end first if
                 }//end else

             }

             $('#SingleDropDown').append("</optgroup>");
             console.log("</optgroup>");
             $("#SingleDropDown").chosen({ placeholder_text_single: "Choose Map" });
             $("#SingleDropDown").trigger("chosen:updated");
      }

по какой-то причине выбранный не обновляется с это только обновляет с , Я что-то пропустил? Может кто-нибудь, пожалуйста, укажите мне в правильном направлении. Я также не могу выбрать, чтобы обновить заполнитель. Все, что я получаю, это первый элемент в списке на дисплее.

заранее спасибо за любую помощь, которую вы можете предложить.

Answer 1

Я наконец понял свою проблему. Я опубликую ответ здесь, чтобы он мог помочь кому-то еще.

Проблема здесь в том, что добавление одного выбора за раз было закрыто браузером. Поэтому вот лучший способ сделать это.

function GetResultsFromMultiCategory(data)
         {
             $("#singleDropDownBlock").show();

             $('#SingleDropDown').append("<option></option>");

             var myOptions = '';
             for (i = 0; i < data.d.categories.length; i++)
             {    
                 if (data.d.categories[i].catNode == "0")
                 {
                     myOptions += "<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">";
                 }
                 else
                 {
                     myOptions += "<option " + "value=" + data.d.categories[i].catNode + ">" + data.d.categories[i].catLoc + "</option>";

                     if (typeof(data.d.categories[i + 1]) != "undefined")
                     {
                         if (data.d.categories[i + 1].catNode == "0")
                         {
                             myOptions += "</optgroup>";
                         }
                     }
                 }    
             }
             myOptions += "</optgroup>";
             $('#SingleDropDown').append(myOptions);
             $("#SingleDropDown").chosen({placeholder_text_single: "Choose Start Location" });
         }

вылет здесь заключается в том, что при использовании append вместо добавления каждой строки строите строку и затем добавляйте ее к элементу html.