HTML5 required select doesn't validate after JQuery value change

Question

Very strange behavior!

I have a select field that I don't have control over the html. I want the default value of the select to be blank, so I make it blank instead of 0. Problem is, it no longer triggers firefox's html5 validator for "required".

Example:

<form id='test' action="#">
    <select id='list' required> 
        <option value="0">zero</option> 
        <option value="1">one</option> 
        <option value="2">two</option> 
        <option value="3">three</option> 
    </select>
    <input type="submit">
</form>



$("#list > option:first").attr("value", "");

http://jsfiddle.net/4NG78/9/

However, if you select another option, and then return it to the first one, I get the popup for required field again. So, if I use jquery to unselect and reselect the first option, it works!

$("#list > option:first").attr("selected", false); 
$("#list > option:first").attr("selected", true);

http://jsfiddle.net/4NG78/8/

This solution works but it seems a little janky. Any ideas on how to do this cleaner?

Edit:

This also works and seems a little less janky, but still doesn't quite make sense as to why it's necessary...

$("#list").val('');
$("#list > option:first").attr("value", "");

http://jsfiddle.net/4NG78/10/