jquery - 如何用新值刷新 dropdown-menu.inner li

Question

我的仓库下拉菜单的 Show.cshtml 代码：

<div class="col-md-3 col-xs-9">
    <div class="form-group warehouseDiv" id="dropwarehouseDiv">
        @Html.ListBoxFor(m => m.dashboardViewCounts.WarehouseID, (IEnumerable<SelectListItem>)ViewBag.WarehouseList, new { id = "ddlWarehouseType", @class = "form-control text-mandatory selectpicker SearchSelectPicker", @multiple = "true", @style = "width: 100 %; !important" })
        @Html.ValidationMessageFor(m => m.dashboardViewCounts.WarehouseID, "", new { @class = "text-danger" })
        @Html.HiddenFor(m => m.dashboardViewCounts.SelectedWarehouseIDs)
    </div>

下拉菜单创建的内联代码：

    <div class="form-group warehouseDiv" id="dropwarehouseDiv">
   <div class="btn-group bootstrap-select show-tick form-control text-mandatory Search">
      <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="ddlWarehouseType" title="BANGALORE,BHIWANDI,"><span id="spndataContent" class="filter-option pull-left">BANGALORE,BHIWANDI,</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
      <div class="dropdown-menu open">
         <ul class="dropdown-menu inner" role="menu">
            <li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">BANGALORE</span><span class=" rglclass glyphicon glyphicon-ok check-mark"></span></a></li>
            <li data-original-index="1" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">BHIWANDI</span><span class=" rglclass glyphicon glyphicon-ok check-mark"></span></a></li>
         </ul>
      </div>
      <select class="form-control text-mandatory selectpicker SearchSelectPicker" id="ddlWarehouseType" multiple="true" name="dashboardViewCounts.WarehouseID" style="width: 100 %; !important" tabindex="-98">
         <option selected="selected" value="2021072911703942703915WRH327">BANGALORE</option>
         <option selected="selected" value="2021072911365441365445WRH920">BHIWANDI</option>
      </select>
   </div>
   <span class="field-validation-valid text-danger" data-valmsg-for="dashboardViewCounts.WarehouseID" data-valmsg-replace="true"></span>
   <input id="dashboardViewCounts_SelectedWarehouseIDs" name="dashboardViewCounts.SelectedWarehouseIDs" type="hidden" value="2021072911703942703915WRH327,2021072911365441365445WRH920,">
</div>

 

我的仓库 jquery 脚本在更改客户端下拉列表时填充了值：

$(document).on('change', '#ddlDashboardClientList', function (e) {
    debugger;
    var clientID = $("#ddlDashboardClientList").val();
    if (clientID.length > 0) {
        var hostname = window.location.href;
        var cnt = hostname.split("/").length;
        var prefix = "";
        if (cnt > 7) {
            var prefixname = hostname.split("/")[3];
            prefix = "/" + prefixname;
        }
                  
            $.ajax({
                async: false,
                cache: false,
                type: "POST",
                url: prefix + '/Dashboard/WarehouseList',
                data: { "ClientID": clientID },
                success: function (data) {
                    debugger;
                    if (data.length > 0) {
                        $('#ddlWarehouseType').html("");
                       

                        var selectedWarehouse = ''; let selectedWarvalue = '';
                        for (i = 0; i <= data.length - 1; i++) {
                            if (data.length >= 2) {
                                selectedWarehouse = selectedWarehouse + data[i].Text + ",";
                                selectedWarvalue = selectedWarvalue + data[i].Value + ",";   
                            } else {
                                selectedWarehouse = data[i].Text;
                                selectedWarvalue = data[i].Value;
                            }
                        }


                         $('.dropdown-menu.inner li').remove();                           
                        
                        var catnametitle = '';
                        var catnamespan = '';
                        $('.btn.dropdown-toggle.btn-default')[0].title = selectedWarehouse;//catnametitle.split(",").length > 1 ? catnametitle.replace(selectedCat.replace("<", "&lt;").replace(">", "&gt;") + ",", "") : catnametitle.replace(selectedCat.replace("<", "&lt;").replace(">", "&gt;"), "Select");
                        $('.filter-option.pull-left')[0].innerText = selectedWarehouse;//catnamespan.split(",").length > 1 ? catnamespan.replace(selectedCat + ",", "") : catnamespan.replace(selectedCat, "Select");
                        
                        $.each(data, function (index, value) {
                            debugger;
                            // APPEND OR INSERT DATA TO SELECT ELEMENT.
                            $('#ddlWarehouseType').append('<option selected="selected" value="' + value.Value + '">' + value.Text + '</option>');
                            $('.dropdown-menu.inner').append('<li data-original-index="' + index + '" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">' + value.Text + '</span><span class=" rglclass glyphicon glyphicon-ok check-mark"></span></a></li>')
                        });
                        $('#dashboardViewCounts_SelectedWarehouseIDs').val(selectedWarvalue);
                    }
                    else {
                    }
                },
                error: function (data) {
                    alert("Error");
                }
            });
        //}            
    }
});

我的仓库下拉更改事件：

  $('#ddlWarehouseType').change(
    function (e) {
        debugger;
        var elems = "";
        
        $('#ddlWarehouseType option:selected').each(function () {
            debugger;
            if (elems == "") {
                elems = $(this).val();
            }
            else {
                elems = elems + ',' + $(this).val();
            }
        });
        $('#dashboardViewCounts_SelectedWarehouseIDs').val(elems);

        if ($('#dashboardViewCounts_SelectedWarehouseIDs').val() != "") {
            $("#valiMsgEquip").html("");
        }
       
    });
    

我遇到了一个问题，因为当我使用新值创建内联 div.dropdown-menu.inner 时，取消选择选项时下拉标记不会被删除？

标签： jqueryasp.net-mvcdrop-down-menudropdown