Reset all select dropdowns

I have have a function that gets called by onbeforeunload. Within I wish to reset all the dropdowns but I cannot find the right method to reset them back to the 0 value.

<head>
    <script type="text/javascript">
        function displaymessage() {
            document.getElementsByTagName('select').value = 1;
            //or
            document.getElementsByTagName('select').options.length = 0;
        }
    </script>
</head>

<body>
    <form>
        <input type="button" value="Click me!" onclick="displaymessage()" />
    </form>

    <select name="data[Rate][15][12][num_rooms]" id="r15ro12">
        <option value="0">0</option><option value="1">1 Rooms</option>
        <option value="2">2 Rooms</option><option value="3">3 Rooms</option><option value="4">4 Rooms</option>
        <option value="5">5 Rooms</option><option value="6">6 Rooms</option><option value="7">7 Rooms</option>
        <option value="8">8 Rooms</option><option value="9">9 Rooms</option>
    </select>

    <select name="data[Rate][15][12][num_rooms]" id="r15ro12">
        <option value="0">0</option><option value="1">1 Rooms</option>
        <option value="2">2 Rooms</option><option value="3">3 Rooms</option><option value="4">4 Rooms</option>
        <option value="5">5 Rooms</option><option value="6">6 Rooms</option><option value="7">7 Rooms</option>
        <option value="8">8 Rooms</option><option value="9">9 Rooms</option>
    </select>
</body>
</html>

Answers


function displaymessage() {
    $("select").each(function() { this.selectedIndex = 0 });
}

this selects the first option (not necessarily having value = 0)


HereĀ“s a way to select the first option in all selects using native JavaScript;

var elements = document.getElementsByTagName('select');
for (var i = 0; i < elements.length; i++)
{
    elements[i].selectedIndex = 0;
}

...but jQuery is very handy and makes most things much easier.


How about something like:

$(window).unload(function () {
    $("select").val("0");
});

With raw javascript code, we can do the following,

elements = document.getElementsByTagName("select")
for(i=0; i < elements.length ; i++){
 elements[i].selectedIndex= 0;
}

Try this:

function displaymessage() {
    $("select").val("0");
}

First of all you should not use the same name/id for the different tag. It should be unique for each tag.

In the tag call the function like,

Then alter ur fun like function displaymessage() { var x= document.getElementsByTagName('select'); for(var i=0;i<2;i++) { document.getElementById(x[i].id).options[0].selected = "0"; } }


Yet Another Way

$('select option:first-child').attr('selected', 'selected');

DEMO


The jQuery solutions I have seen so far don't take into account to remove the previous selected attribute if one exists, hence I believe that this extra step is required:

$("#myControlId").find("select").each(function (index) {
        var ctrl=$(this);       
        if (ctrl.children().length > 0) {
            $(ctrl.children()).each(function(index) {
                if (index===0) $(this).attr('selected', 'selected'); 
                else $(this).removeAttr('selected');
            });
        }
});

This solution only keeps one selected attribute in the first option and removes all the others (if applicable).


Try this:

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
    }
} );

$('#dropDownListID').val("");

or

$('#dropDownListID').val("0");


Need Your Help

Eclipse projects not showing up after placing project files in workspace/projects

eclipse project explorer projects invisible

I've searched for 2 days and can't find anything. I find things that are close, but not what I need.