新增中 <li> 到现有的 <ul>

Question

I have a MultiSelectList in View.

@Html.ListBox("AreaList",new MultiSelectList(new List<State>()),
    new { @class = "chosen-select", data_placeholder = "انتخاب منطقه...", style = "width: 90%;", tabindex = "4" }
)}

<div id="AreaList_chosen" title="" style="width: 994px;" class="chosen-container chosen-container-multi chosen-with-drop chosen-container-active">
    <ul class="chosen-choices">
        <li class="search-field">
            <input tabindex="4" value="انتخاب منطقه..." class="default" autocomplete="off" style="width: 89px;" type="text">
        </li>
    </ul>
    <div class="chosen-drop">
        <ul class="chosen-results"></ul>
    </div>
</div>

I want to add li to ul.chosen-results in jQuery. I use this code but it doesn't append items.

var li = $('<li></li>');
li.html('Test!');

$("#AreaList_chosen > div.chosen-drop ul").append(li);
$(".chosen-results").append(li);

Answer 1

You need to add an option to the select that the chosen plugin is applied to

$('#AreaList').append($('<option></option>').text('Test!').val(''));

and then trigger the updated event

 $('#AreaList').trigger('chosen:updated');