I'm trying to move one element from a <select> list to the top, but my code doesn't seem to work

Question

I have this page , and there is a <select> drop-down list next to
"Billing State (non-US scroll to bottom)"

I want to use Javascript to put the last item of that list (My state is not listed) to the top of the list.

So far I tried this code:

<script>
$(document).ready(function () {
$("select[name=billing_state]").find('option[value="_NOTLISTED_"]').prependTo($("select[name=billing_state]"));
});
</script>

I don't know why, it works on http://jsfiddle.net/4kHuA/21/ , but it doesn't work when I modify the html page and test it on the browser.

I'm not very experienced with Javascript, so maybe I did something really dumb.

Answer 1

Please make sure jquery.js which you refer to as $ has loaded before you call it in your script. As @Sergio wrote, placing it before </body> tag may help a lot.