检查Chrome中的元素未显示所选选项

Question

When I use Chrome's Inspect Element feature to view a <select> element that I've programmatically set the selected option on, the selected <option> doesn't show selected="selected" . Everything works properly, I just can't see which options are selected in the inspector view.

Is this the proper behavior? It seems like not only should the selected element be updated in the internal representation of the DOM, but that selected="selected" should be added to the visual representation as well.

Here's an example using several different ways to set the selected property of an <option> : http://jsfiddle.net/ScTTY/

Essentially, I'm using variations on this code:

    var current = new Date().getFullYear();
    var year1 = this.$("select.year1");
    for (var i=0; i<100; i++) {
        var option = $("<option>",{
            value: current - i,
            text: current - i,
            selected: (i==17 ? "selected" : "")
        });
        year1.append(option);
    }

However, I use different ways of setting the selected option:

        selected: (i==17 ? true : false)

        if (i==17) option.attr("selected","selected");

        if (i==17) option[0].selected = true;

        if (i==17) option[0].selected = "selected";

All of these methods create a <select> containing the years 1912 to 2011 with 1994 selected.

Answer 1

When in the Elements tab, you see the Style properties on the right. Under the Styles drawer is a Properties drawer. Click on the selected option and the Property will indicate that it is selected.

It's a good question though - I would expect to see it in the HTML. I can only offer that it works the same in Firebug so it looks to be standard behavior.