How to set ASP.net dropdownlist index to 0 from the front-end

Question

I have the following code in ASP.net page:

<asp:DropDownList ClientIDMode="Static" ID="ddl1" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
<asp:DropDownList ClientIDMode="Static" ID="ddl2" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
<asp:DropDownList ClientIDMode="Static" ID="ddl3" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>

<input type="button" id="ClearForm" value="Clear" class="btn1" />

JQuery to set the index to 0 for all three dropdownlist:

$(function () {
    $("body").on("click", "#ClearForm", function (e) {
        e.preventDefault();
        $("select#ddl1, select#ddl2, select#ddl3").prop('selectedIndex', 0); //does not set the selected index to 0
        alert($("select#ddl1").text()); //displays all the options from #ddl1
    });
});

How can I modify so the dropdownlist index is set to 0.

HTML render of the first dropdownlist:

<select name="ctl00$BodyPlaceHolder$ddl1" id="ddl1" class="le">
    <option value="Select a State">Select a State</option>
    <option value="Alabama">AL</option>
    <option value="Alaska">AK</option>
    <option value="Arizona">AZ</option>
</select>

I tried the following JQuery and it returns null:

alert($("select#ddl1").val());

Also tried the following and it didn't work:

$('select').each(function () {
    $(this).find('option:first').prop('selected', 'selected');
});

Added the following JavaScript:

function setSelectedIndex(dropdownlist, selVal) {
    var ddl1 = document.getElementById(dropdownlist);
    alert(ddl1.selectedIndex);
    if (ddl1.length >= selVal) { //if the selected value is greater then 0, the alert is shown but the value is not set back to 0.
        ddl1.selectedIndex = selVal;
        alert("greater or equal");
    }
    else {
        alert("not greater or equal");
    }
}

It seems like, if I remove the chosen Jquery it works fine: http://jsfiddle.net/bpbvhsay/

Answer 1

There are many ways to do this but here is the solution with JavaScript:

function setSelectedIndex(dropdownlist, selVal)
    var ddl1 = document.getElementById(dropdownlist);
    //alert(ddl1.selectedIndex); //displays the proper index...
    if(ddl1.length >= selVal)
    {
       ddl1.selectedIndex = selVal;
    }
}

Call the above function as per you required as below:

setSelectedIndex('<%=ddl1.ClientID %>', 2);

UPDATE As you said you have already set ClientIDMode, try the following updated function:

function setSelectedIndex(selVal){
    var ddl1 = document.getElementById('ddl1');
    if(ddl1.length >= selVal)
    {
       ddl1.selectedIndex = selVal;
    }
}

and call it as:

setSelectedIndex(0);

Answer 2

I was using the Chosen Jquery which caused the dropdownlist to not update.

This is the HTML:

<select name="ctl00$BodyPlaceHolder$ddl1" id="ddl1" class="chose-select le">
    <option value="Select a State">Select a State</option>
    <option value="Alabama">AL</option>
    <option value="Alaska">AK</option>
    <option value="Arizona">AZ</option>
</select>

JavaScript which sets the selected index to 0:

function setSelectedIndex(dropdownlist, selVal) {
    var ddl1 = document.getElementById(dropdownlist);
    if (selVal < ddl1.selectedIndex) {
        ddl1.selectedIndex = selVal;

        $(ddl1).val(0).trigger('chosen:updated');
    }
}

That does the trick.