CODEWITHSUNDEEP
c#htmlasp.netjquery-chosen
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

Why does the ASP.net dropdownlist does not default to 0 if chosen jquery is used

I was using the Chosen Jquery which causes 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 with one issue. The issue is once the function sets the selected index to 0, it shows the "Select an Option" as the 0 index instead of the default first option.

enter image description here

Any idea how to fix that?

Upvotes: 0

Views: 896

Answers (3)

Sherif Ahmed
Sherif Ahmed

Reputation: 1946

just add data-placeholder="Choose a State" to be like that 

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

Upvotes: 1

SearchForKnowledge
SearchForKnowledge

Reputation: 3751

I had to remove the .val(0) and it worked fine.

$(ddl1).trigger('chosen:updated');

Upvotes: 0

Mark
Mark

Reputation: 4883

Try something like this:

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

Upvotes: 1

Related Questions