Deselecting items in Html.Dropdown doesn't set text to "Select..." title

Question

I have a dropdown to select a fiscal quarter and fill my date controls

    @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..."})

For my date controls, I set up a change event to clear my Quarters dropdown. IOW, when the user manually changes the date, we're no longer displaying that quarter, so I want that to go back to the "Select..." title associated with that control.

I have set the selectedIndex = -1. I have iterated through the options and removeAttribute('selected'). But, nothing I do resets the display in the control away from the text of the quarter selected, Q4-2023. When I inspect my dropdown control, I can step through with the browser's debugger, and I can look at the attributes change on my controls. The code is executing.

Looking at the HTML rendered by Razor, I see two sub-controls with the "Q3-2024" title text. One is a button type="button". Another is a div with class "filter-option-inner-inner". Neither are given an id or other unique thing I can get in my change handler. (I have another dropdown on the same page.)

How do I trigger the dropdown to redisplay when I deselect the option?

----- Edit -----

Someone wanted to see the rendered code. But, I'm probably going to need someone with experience in Razor to help with this.

    <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>

And, here's my JavaScript, including several of my tests commented out.

        $("#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);
        //    }
        //});

Answer 1

Nope, not quite. It's refreshing the entire page.

---

One of my colleagues was able to shake loose some time to look at it with me. He gave me two changes.

First, was to create an "empty" option at the beginning of my list:

<option value>Select...</option>
<option value="0">Q1-2024</option>
etc
 .
 .
</select>

And then, a call to refresh the control in my change handler:

            $("#Quarters").val("");
            $('#Quarters').selectpicker('refresh');

Simple oversights on my part. Still bringing my HTML and JavaScript/JQuery skills up to modern times.