Fill Chosen dropdownlist

Question

I'm using Razor pages

i have 2 dropdownlist

the seconde one is filling when select index change of the first one by using jquery as you see

 <script>
        $(document).ready(function () {
            $("#nomclient").on("change", function () {
                $list = $("#idconnexion");
                $.ajax({
                    url: "/api/ddl",
                    type: "GET",
                    data: { id: $("#nomclient").val() }, //id of the state which is used to extract cities
                    traditional: true,
                    success: function (result) {
                        $list.empty();
                        $.each(result, function (i, item) {
                            $list.append('<option value="' + item["idConnexion1"] + '"> ' + item["idConnexion1"] + ' </option>');
                        });
                    },

                });
            });
        });
    </script>

and it's working fine .

the problem is when i add this

$("#idconnexion").chosen({ width: '90%' });

the second dropdownlist is not filling , but when i delete it , its filling again.

any suggestions

Answer 1

You have to tell chosen that the select options have changed:

$('.my_select_box').trigger('chosen:updated');

Reference

So in your case:

// ...
success: function (result) {
   $list.empty();
   $.each(result, function (i, item) {
      $list.append('<option value="' + item["idConnexion1"] + '"> ' + item["idConnexion1"] + ' </option>');
   });
   $list.trigger('chosen:updated');
},
// ...