0

I have few dropdownlist created by using Html.DropDownListFor like:

<div class="control-group">
  <label class="control-label" for="inputPropertySurname">
   City
   <span class="form-required" title="This field is required.">*</span>
  </label>
  <div class="controls">
   @*<input type="text" id="inputPropertySurname">*@
   @Html.DropDownListFor(m => m.CityId, vmpa.Cities)
  </div>
 <!-- /.controls -->
</div>

but it always create a div area after selectbox

<div id="CityId_chzn" class="chzn-containerchzn-container-single 
 chzn-container-single-nosearch" style="width: 220px;" title="">
   <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
    <span>Hà Nội</span>
    <div><b></b></div>
   </a>
   <div class="chzn-drop" style="left: -9000px;">
    <div class="chzn-search"><input type="text" autocomplete="off">
    </div>
    <ul class="chzn-results">
     <li id="CityId_chzn_o_0" class="active-resultresult-selected" style="">Hà Nội</li>
     <li id="CityId_chzn_o_1" class="active-result" style="">Hồ Chí Minh</li>
    </ul>
   </div>
</div>

i use ajax to get json array and replace new option in json aray to dropdownlist. select box have new option but it still show old option in div id City_chzn. i try many ways jquery but can't refresh it to show new value.

my ajax

<script type="text/javascript">
    $(document).ready(function () {

        $("#CountryId").chosen().change(function () {
            var id = $("#CountryId option:selected").val();
            DDLCountryChange(id);
        });

    });

    function DDLCountryChange(id) {
        var ddl = $("#CityId");
        ddl.chosen();
        ddl.prop("disabled", true);
        $.ajax({
            url: "/Post/GetCityInfoByCountry/" + id,
            type: "GET",
            dataType: "JSON",
            success: function (result) {
                ddl.empty();
                var str = '';
                $.each(result, function (index, value) {
                    ddl.chosen().append("<option value='" + value['Value'] + "'>" + value['Text'] + "</option>");
                    ddl.chosen().trigger('listzt:updated');
                });

                //ddl.prop('disabled', false);
            }
        });
    }
</script>

UPDATE Now i know why my code create a div. because my template using chosen jquery so it is reason why a div created after select. my chosen ver 0.9.12. i'm using 

ddl.trigger('listzt:updated');

but chosen doesn't update new value to display

UPDATE

I have solved my problem. trigger('liszt:updated') not listzt:updated. All my bad :(

xOwl
  • 1
  • 2
  • looks like your HtmlHelper is creating a series of DIVs and LIs to create a "fake" drop-down instead of an actual real one... and in your ajax you're trying to reference the ID you give it in the back-end (CityID), when you should be referencing the client rendered equivalent (CityID_chzn)... – MaxOvrdrv May 15 '14 at 17:11
  • i don't know how HtmlHelper can create it, when i view source my website, all of fake div disapper, it only show when inspect element. i try to find a solution for remove all that div – xOwl May 15 '14 at 17:17
  • take a look here for finding the client id... http://stackoverflow.com/questions/4829193/how-to-get-the-html-id-generated-by-asp-net-mvc-editorfor – MaxOvrdrv May 15 '14 at 17:21
  • i know how to find id of elemet, but i want HtmlHelper not create the fake div, only select element – xOwl May 16 '14 at 02:44

1 Answers1

0

Please take a look at this very descriptive and helpful tutorial on how to work with DropDownLists, in an MVC environment, using JQuery and JSON rest services.

http://www.c-sharpcorner.com/UploadFile/4b0136/working-with-dropdownlist-in-mvc-5/

Strangely, the example they are using to make the tutorial, is almost exactly what you're doing here (Country, City, etc)...

Hope this helps!

MaxOvrdrv
  • 1,780
  • 17
  • 32
  • Thank you so much, i solved my problem, all div created by chosen js in my template – xOwl May 16 '14 at 14:12