How to assign empty value to select dropdown?

Question

This works with Google Chrome and IE but not Firefox. For some reaons, Chrome and IE allow blank value to be assigned eventhough it is not part of the dropdown selection.

document.getElementById('dropdownid').value = "";

Note that I have access to jQuery but is not doing what i wanted.

$("#dropdownid").val("");

The above JQuery does not set it to a blank value because blank is not part of the dropdown options. I need to assign "" to the dropdown selectedvalue due to some third party legacy code issues.

Any idea?

Answer 1

Setting selectedIndex to -1 clears the selection.

document.getElementById('dropdownid').selectedIndex = -1;

Answer 2

Simply change the selectedIndex. E.G:

$(function(){
    $dropdown = $("#dropdownid");
    alert($dropdown.val()); //alerts "2"
    $dropdown[0].selectedIndex = -1; //or document.getElementById('dropdownid').selectedIndex = -1;
    alert($dropdown.val()) //alerts null
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="dropdownid">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
</select>

http://jsfiddle.net/kxoytdg8/