Html.Dropdown取消选中后无法显示"Select..."文本的技术求助

用@Html.DropDownList创建了一个财季选择下拉框，绑定selectpicker插件并设置title为"Select..."，用于填充日期控件。当用户手动修改日期控件时，需将该下拉框重置为显示"Select..."文本，但尝试设置selectedIndex=-1、移除option的selected属性等操作后，下拉框仍显示选中的财季文本。查看Razor渲染后的HTML，发现下拉框对应的button和filter-option-inner-inner div无唯一标识，请教如何触发下拉框重新显示默认文本。

相关代码 #

Razor代码 #

@Html.DropDownList("Quarters", null, null, htmlAttributes: new { @class = "selectpicker", 
    id = "Quarters", data_style_base = "form-control", data_width = "100%", data_size = "7",
    data_dropdown_align_right = "auto", title = "Select..."})

渲染后的HTML #

<select class="selectpicker" data-dropdown-align-right="auto" 
    data-size="7" data-style-base="form-control" data-width="100%" id="Quarters" 
    name="Quarters" title="Select...">
<option value="0">Q1-2024</option>
<option value="1">Q4-2023</option>
<option value="2">Q3-2023</option>
<option value="3">Q2-2023</option>
<option value="4">Q1-2023</option>
<option value="5">Q4-2022</option>
<option value="6">Q3-2022</option>
<option value="7">Q2-2022</option>
<option value="8">Q1-2022</option>
<option value="9">Q4-2021</option>
<option value="10">Q3-2021</option>
<option selected="selected" value="11">Q2-2021</option>
<option value="12">Q1-2021</option>
</select>

<button type="button" class="form-control dropdown-toggle btn-light" 
  data-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox"
  aria-expanded="false" data-id="Quarters" title="Q2-2021">
    <div class="filter-option">
      <div class="filter-option-inner">
        <div class="filter-option-inner-inner">Q2-2021</div>
      </div>
    </div>
</button>

尝试的JavaScript代码 #

$("#fromDate, #toDate").change(function () {
    debugger;

    //$("#Quarters").val([]);

    var el = document.getElementById("Quarters");
    var items = el.options;
    //el.value = "";
    el.selectedIndex = 0;
    
    for (var i = 0; i < items.length; i++) {
        items[i].removeAttribute('selected');
    }

    //el.setAttribute('Title', "Select...");

//    //document.getElementById("Quarters").selectedIndex = -1;

    //Array.prototype.forEach.call(document.querySelectorAll("#salespeopleSelectedArray :checked"), function (el) { el.selected = false });

//    //var checkedElements = document.querySelectorAll("#Quarters :checked");
//
//    //for (var i = 0, length = checkedElements.length; i < length; i++) {
//    //    checkedElements[i].selected = false;
//    //}​ 
//    //document.getElementById("Quarters").selectedIndex = -1;
});

//$(document).ready(function () {
//    $("#fromDate").change(function () {
//        clearQuartersDropdown();
//    });
//    $("#toDate").change(function () {
//        clearQuartersDropdown();
//    });
//    function clearQuartersDropdown() {
//        debugger;
//        var quartersDropdown = $("#Quarters");
//        quartersDropdown.val("");
//        quartersDropdown.prop("selectedIndex", -1);
//        quartersDropdown.find("option:selected").prop("selected", false);
//    }
//});

直接操作原生select元素无法同步到selectpicker生成的自定义UI，必须调用插件提供的API更新状态：

正确实现代码 #

$("#fromDate, #toDate").change(function () {
    // 清空选中值并调用插件刷新方法
    $("#Quarters").val('').selectpicker('refresh');
});

或者更简洁的写法：

$("#fromDate, #toDate").change(function () {
    $("#Quarters").selectpicker('val', '');
    $("#Quarters").selectpicker('refresh');
});

原理说明 #

selectpicker会隐藏原生select，生成自定义的button和下拉菜单界面。直接修改原生select的属性不会自动同步到自定义UI，必须调用selectpicker('refresh')方法，让插件根据原生select的最新状态重新渲染界面，这样就能正确显示设置的title文本"Select..."。

内容的提问来源于stack exchange，提问作者Mighty