如何在javascript中设置select2下拉列表的selectedindex

Question

I have an asp.net dropdown for which I added select2 and a clear button in my page. When I click on clear button I would like to be able to set to the option at zero index. Below is the code:

If I remove the select2 part, I'm able to clear the dropdown with " ddlPatient.selectedIndex = 0; "

$(document).ready(function() { debugger;   $("[id$=ddlPatients]").select2(); });

function btnClear_Click() {
    debugger;
    var ddlPatient = document.getElementById("<%=ddlPatients.ClientID %>");

    ddlPatient.selectedIndex = 0;
}

<asp:DropDownList ID="ddlPatients" runat="server"></asp:DropDownList>
<asp:Button ID="btnClear" runat="server" CssClass="btn btn-info" Text="Clear" OnClientClick="btnClear_Click();return false;" />

Answer 1

 <asp:DropDownList ID="ddlPatients" runat="server" ClientID="”Echo”" ClientIDMode="Static"/>

Then in script try...

 var $ddlPatients = $("select[name$=ddlPatients]");
 $('#ddlPatients').select2('val', '0');

or

$('#ddlPatients').select2().select2('val', '0');

Answer 2

Use

$(document).ready(function () { debugger; $("[id$=<%=ddlPatients.ClientID %>]").select2(); });

instead of

$(document).ready(function () { debugger; $("[id$=ddlPatients]").select2(); });

You are using ddlPatients.ClientID in one place, but hard code the id somehwere else.

Answer 3

If you change the value of the underlying <select> element, you need to trigger its change event to cause the Select2 control to update itself to match.

document.getElementById("<%=ddlPatients.ClientID %>");

ddlPatient.selectedIndex = 0;

$(ddlPatient).change(); // Trigger the change event.

Or:

$("<%=ddlPatients.ClientID %>").prop('selectedIndex', 0).change();