Clear dropdown selection on radio button click

Question

I have a set of radio buttons. When primary is selected, the Primary Company field is hidden. I would also like to at this time clear the drop down selection. How can I do this?

<p>
        <label>Company Type:</label>
        <label for="primary"><input onclick="javascript: $('#sec').hide('slow');" type="radio" runat="server" name="companyType" id="primary" checked />Primary</label>
        <label for="secondary"><input onclick="javascript: $('#sec').show('slow');" type="radio" runat="server" name="companyType" id="secondary" />Secondary</label>
        <div id="sec">
        <label for="primary_company">Primary Company:</label>
            <%= Html.DropDownList("primary_company", Model.SelectPrimaryCompanies, "** Select Primary Company **") %>
        </div>

    </p>

karim79 · Accepted Answer · 2010-04-21T15:07:58.690

8

You can clear the selection (that is, select the first option) like so:

$("#primary_company").find('option:first')
                     .attr('selected','selected');

edited Apr 21 '10 at 15:07

answered Apr 21 '10 at 15:02

karim79

339,989
67
413
406

+1. but why the `.parent('select');` part? You could just use `.end()`, right? – David Murdoch Apr 21 '10 at 15:09
@David - that was part of a longer chain to serve an evil purpose. (I pasted too much code from one of my test pages), but now that you point that out, `end` is better than `parent('select')`. Thanks. – karim79 Apr 21 '10 at 15:15

score 4 · Answer 2 · answered Sep 09 '11 at 05:44

4

You can pass null to the jQuery val() method as a nice way to clear a dropdown.

$('#primary_company').val(null);

answered Sep 09 '11 at 05:44

Blake Taylor

9,217
5
38
41

score 0 · Answer 3 · answered Apr 21 '10 at 15:06

To clear the selection completely (so that not even the first element is selected) you could use:

$('#primary_company').attr('selectedIndex', '-1');

If #primary_company is a multiple select box you could use:

$('#primary_company option').attr('selected', false);

score 0 · Answer 4 · answered Apr 21 '10 at 15:08

0

$("#primary_company").find('[selected]').removeAttr("selected");

answered Apr 21 '10 at 15:08

David Murdoch

87,823
39
148
191

score 0 · Answer 5 · edited Mar 12 '18 at 09:25

0

This is the best short way that works for me:

$("#selectNetBankNameId")[0].selectedIndex = 0;
$("#selectNetBankNameId").trigger("change");

edited Mar 12 '18 at 09:25

ikos23

4,879
10
41
60

answered Mar 12 '18 at 08:14

user9478405

1

Looks strange to me - this question is seven years old, there are multiple answers that look much nicer than yours, and this should be the "best short way"? – Nico Haase Mar 12 '18 at 08:34

Clear dropdown selection on radio button click

5 Answers5

Linked