Devexpress MVC DropDownList (持续更新))

     @Html.DevExpress().DropDownEdit(settings =>
                                   {
                                       settings.Name = "psBankCharge";
                                       settings.ControlStyle.Border.BorderColor = System.Drawing.Color.LightGray;
                                       settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
                                       settings.Height = System.Web.UI.WebControls.Unit.Pixel(34);
                                       settings.ControlStyle.CssClass = "form-control dx-dropdown";
                                       settings.Properties.NullText = @Utils.GetTranslation("Select") + " " + @Utils.GetTranslation("Bank Charge");
                                       settings.Properties.NullTextStyle.CssClass = ":-moz-placeholder";
                                       settings.Properties.DropDownWindowStyle.BackColor = System.Drawing.Color.FromArgb(0xEDEDED);

                                       settings.SetDropDownWindowTemplateContent(c =>
                                       {
                                           @Html.DevExpress().ListBox(
                                                   listBoxSettings =>
                                                   {
                                                       listBoxSettings.Name = "lbBankCharge";
                                                       listBoxSettings.ControlStyle.Border.BorderWidth = 0;
                                                       listBoxSettings.ControlStyle.BorderBottom.BorderWidth = 1;
                                                       listBoxSettings.ControlStyle.Border.BorderColor = System.Drawing.Color.LightGray;
                                                       listBoxSettings.ControlStyle.BorderBottom.BorderColor = System.Drawing.Color.FromArgb(0xDCDCDC);
                                                       listBoxSettings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
                                                       listBoxSettings.Width = System.Web.UI.WebControls.Unit.Percentage(99.99);
                                                       listBoxSettings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;
                                                       listBoxSettings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e){ ListBoxMultipleSelectionChanged(psBankCharge, s, e);}";
                                                       listBoxSettings.Properties.ValueType = typeof(string);
                                                       listBoxSettings.Properties.Items.Add("(Select all)");
                                                       foreach (ListEditItem item in (System.Collections.IEnumerable)ViewData["BankCharge"])
                                                       {
                                                           listBoxSettings.Properties.Items.Add(item.Text, item.Value);
                                                       }
                                                   }
                                               ).Render();
                                           ViewContext.Writer.Write("<div style=\"margin: 6px; overflow hidden;\">");
                                           @Html.DevExpress().Button(
                                               buttonSettings =>
                                               {
                                                   buttonSettings.Name = "btnCloseBankCharge";
                                                   buttonSettings.Text = "Close";
                                                   buttonSettings.ControlStyle.CssClass = "btn btn-default";
                                                   buttonSettings.ClientSideEvents.Click = "function(s, e){ psBankCharge.HideDropDown(); }";
                                               }
                                           ).Render();
                                           ViewContext.Writer.Write("</div>");
                                       });

                                       settings.DisabledStyle.BackColor = System.Drawing.Color.FromArgb(0xEEEEEE);
                                       settings.Properties.AnimationType = DevExpress.Web.AnimationType.None;
                                       settings.Properties.ClientSideEvents.TextChanged = "function(s, e){ SynchronizeListBoxMultipleValues(s, lbBankCharge); }";
                                       settings.Properties.ClientSideEvents.DropDown = "function(s, e){ SynchronizeListBoxMultipleValues(s, lbBankCharge); }";
                                   }).GetHtml()

var gs_TextSeparator = ",";

function UpdateSelectAllItemState(ao_lbListBox) {
    IsAllSelected(ao_lbListBox) ? ao_lbListBox.SelectIndices([0]) : ao_lbListBox.UnselectIndices([0]);
}

function IsAllSelected(ao_lbListBox) {
    for (var i = 1; i < ao_lbListBox.GetItemCount() ; i++)
        if (!ao_lbListBox.GetItem(i).selected)
            return false;
    return true;
}

function UpdateText(ao_lbListBox, ao_ddlDropDown, ab_IsSingle) {
    if (ab_IsSingle)
        ao_ddlDropDown.SetText(GetSelectedItemsText_Single(ao_lbListBox.GetSelectedItems()));
    else
        ao_ddlDropDown.SetText(GetSelectedItemsText(ao_lbListBox.GetSelectedItems()));
}

function GetSelectedItemsText(aa_Items) {
    var la_Texts = [];
    for (var i = 0; i < aa_Items.length; i++)
        if (aa_Items[i].index != 0)
            la_Texts.push(aa_Items[i].text);
    return la_Texts.join(gs_TextSeparator);
}

function GetSelectedItemsText_Single(aa_Items) {
    var la_Texts = [];
    for (var i = 0; i < aa_Items.length; i++)
        la_Texts.push(aa_Items[i].text);
    return la_Texts;
}

function GetValuesByTexts(aa_Text, ao_lbListBox) {
    var la_ActualTexts = [];
    var ls_Item;
    for (var i = 0; i < aa_Text.length; i++) {
        ls_Item = ao_lbListBox.FindItemByText(aa_Text[i]);
        if (ls_Item != null) {
            la_ActualTexts.push( ls_Item.value );
        } else {
            la_ActualTexts.push("");
        }
    }
    return la_ActualTexts;
}
function GetQuotesValuesByTexts(aa_Text, ao_lbListBox,as_Quotes) {
    var la_ActualTexts = [];
    var ls_Item;
    for (var i = 0; i < aa_Text.length; i++) {
        ls_Item = ao_lbListBox.FindItemByText(aa_Text[i]);
        if (ls_Item != null) {
            la_ActualTexts.push(as_Quotes + ls_Item.value + as_Quotes);
        } else {
            la_ActualTexts.push("");
        }
    }
    return la_ActualTexts;
}


function GetTextsByValues(aa_Value, ao_lbListBox) {
    var la_ActualTexts = [];
    var ls_Item;
    for (var i = 0; i < aa_Value.length; i++) {
        ls_Item = ao_lbListBox.FindItemByValue(aa_Value[i]);
        if (ls_Item !== null)
            la_ActualTexts.push(ls_Item.text);
    }
    return la_ActualTexts;
}

function SelectItemByValue(ao_ddlDropDown, ao_lbListBox, as_Value) {
    for (var i = 0; i < ao_lbListBox.GetItemCount() ; i++) {
        if (ao_lbListBox.GetItem(i).value == as_Value) {
            ao_lbListBox.SetSelectedIndex(i);
            break;
        }
    }
    UpdateText(ao_lbListBox, ao_ddlDropDown, true);
}

function SetSelectItemByText(ao_ddlDropDown, ao_lbListBox, as_Text) {
    for (var i = 0; i < ao_lbListBox.GetItemCount() ; i++) {
        if (ao_lbListBox.GetItem(i).text == as_Text) {
            ao_lbListBox.SetSelectedIndex(i);
            break;
        }
    }
    UpdateText(ao_lbListBox, ao_ddlDropDown, true);
}

function SynchronizeListBoxValues(ao_ddlDropDown, ao_lbListBox) {
    var la_Texts = ao_ddlDropDown.GetText().split(gs_TextSeparator);
    var la_Values = GetValuesByTexts(la_Texts, ao_lbListBox);
    ao_lbListBox.SelectValues(la_Values);
    UpdateText(ao_lbListBox, ao_ddlDropDown, true);
}

function ListBoxSelectionChanged(ao_ddlDropDown, ao_lbListBox) {
    UpdateText(ao_lbListBox, ao_ddlDropDown, true);
    ao_ddlDropDown.HideDropDown();
}

function InitDropDown(ao_ddlDropDown, ao_lbListBox) {
    ao_lbListBox.SetSelectedIndex(0);
    UpdateText(ao_lbListBox, ao_ddlDropDown, true);
}

function ListBoxMultipleSelectionChanged(ao_ddlDropDown, ao_lbListBox, ao_lbListBoxEvent) {
    if (ao_lbListBoxEvent.index === 0)
        ao_lbListBoxEvent.isSelected ? ao_lbListBox.SelectAll() : ao_lbListBox.UnselectAll();
    UpdateSelectAllItemState(ao_lbListBox);
    UpdateText(ao_lbListBox, ao_ddlDropDown, false);
}

function SynchronizeListBoxMultipleValues(ao_ddlDropDown, ao_lbListBox) {
    ao_lbListBox.UnselectAll();
    var la_Texts = ao_ddlDropDown.GetText().split(gs_TextSeparator);
    var la_Values = GetValuesByTexts(la_Texts, ao_lbListBox);
    ao_lbListBox.SelectValues(la_Values);
    UpdateSelectAllItemState(ao_lbListBox);
    UpdateText(ao_lbListBox, ao_ddlDropDown, false);
}

function ResetListBox(ao_ddlDropDown, ao_lbListBox) {
    ao_lbListBox.UnselectAll();
    ao_ddlDropDown.SetText(null);
}

function ResetSingleListBox(ao_ddlDropDown, ao_lbListBox) {
    ao_lbListBox.SetSelectedIndex(0);
    UpdateText(ao_lbListBox, ao_ddlDropDown, true);
}