On change event won't fire select list

Question

I can't seem to get jQuery to fire and on change event for the county_id select list. I have tried multiple code snippets and none will fire the on change. Any ideas?

HTML:

<select id="county_id" name="county_id">
    <option value=""></option>
    <option value="1">Somewhere</option>
    <option value="2">Somewhere else</option>
</select>

<select id="vice_county_id" name="vice_county_id"></select>

JS:

$(function(ready) {
    $("#county_id").change(
            function() {
                $("#vice_county_id").html("");
                var co_id = $("#county_id > option[@selected]").attr("value");
                if (co_id != 0) {
                    $.getJSON('./vice_county_web_service.php?co_id=' + co_id,
                            function(data) {
                                $.each(data, function() {
                                    $("#vice_county_id").append(
                                            $("<option></option>").val(
                                                    this['value']).html(
                                                    this['name']));
                                });
                            });
                }
            });

});

Answer 1

The event is firing, but this line of code is failing:

var co_id = $("#county_id > option[@selected]").attr("value");

...because that's an invalid selector. In your browser's JavaScript console, you should be seeing Syntax error, unrecognized expression: [@selected].

jQuery will happily get you the value, just use val:

var co_id = $("#county_id").val();

Live example | source