CODEWITHSUNDEEP
javascriptjqueryhtml
acr
acr

Reputation: 1746

how to change a drop down options to default selected using jquery

Below code is part of my a html form drop down menu:

<div class="wrap-quest-resp" id="fa8">
    <div class="input-quest-no-height">FA and port - 8</div>
    <div class="input-resp-no-height">
        <select id="fa-select-8" name="fa-select-8">
        <option disabled="disabled" SELECTED >Dir</option>
        <option <?php if ($_POST['fa-select-8']==1)  {echo "selected='selected'"; } ?> >1</option>
        <option <?php if ($_POST['fa-select-8']==2)  {echo "selected='selected'"; } ?> >2</option>
        <option <?php if ($_POST['fa-select-8']==3)  {echo "selected='selected'"; } ?> >3</option>
        <option <?php if ($_POST['fa-select-8']==4)  {echo "selected='selected'"; } ?> >4</option>
        <option <?php if ($_POST['fa-select-8']==5)  {echo "selected='selected'"; } ?> >5</option>
        </select>

        <select id="proc-select-8" name="proc-select-8">
        <option disabled="disabled" SELECTED >Proc</option>
        <option <?php if ($_POST['proc-select-8']==a) {echo "selected='selected'"; } ?> >a</option>
        <option <?php if ($_POST['proc-select-8']==b) {echo "selected='selected'"; } ?> >b</option>
        </select>

        <select id="port-select-8" name="port-select-8">
        <option disabled="disabled" SELECTED >Port</option>
        <option <?php if ($_POST['port-select-8']==0) {echo "selected='selected'"; } ?> >0</option>
        <option <?php if ($_POST['port-select-8']==1) {echo "selected='selected'"; } ?> >1</option>
        </select>
    </div>
    </div>

I a using this jquery to hide above mentioned div and its drop down selection

$('#fa8').slideUp("fast");

I would like to change the option selected to its default SELECTED option while hiding the div . That is to below options for all three drop down menus

<option disabled="disabled" SELECTED >Dir</option>
<option disabled="disabled" SELECTED >Proc</option>
<option disabled="disabled" SELECTED >Port</option>

Upvotes: 0

Views: 415

Answers (2)

talemyn
talemyn

Reputation: 7940

Since you appear to want all of the selects to go to their default values, I'd suggest using this:

$('#fa8').find("select").find("option:first").prop("selected", true);

Depending on how your code is implemented, you could make it part of a callback, as tymeJV suggested, or simply place it on the next line after the slideUp call in the code.

If you use the callback, you can use $(this) instead of $('#fa8'):

$('#fa8').slideUp("fast", function() {
    $(this).find("select").find("option:first").prop("selected", true);
});

If you go for the "multi-line" approach, store off the selector for $('#fa8') in a variable, so that you are not running the select twice:

var $wrapReqResp = $('#fa8');

$wrapReqResp.slideUp("fast");
$wrapReqResp.find("select").find("option:first").prop("selected", true);

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

Use the callback from slideUp and set the 0 index of each to selected via prop()

$('#fa8').slideUp("fast", function() {
    //Set the 0 index as selected
    $("#fa-select-8 option").eq(0).prop("selected", true);
    //do the same for the rest, change the ID
});

Upvotes: 1

Related Questions