Is there any handler that can detect if a select field has any option selected without jQuery

Question

When an option is selected that wasn't previously, the onChange handler can detect this. How can a preselected option be detected (ie, whether a select field has any option selected)? Is this possible without jQuery? Is there a handler, such as onSelected (not the same as onSelect for highlighted text) for this event?

Example:

<select onSelected="FunctionRunIfOptionSelected()">
<option> ... </option>
...
</select>

The preselected option will have been selected on page load. ie, with the HTML dynamically rendered:

<option selected> ... </option>

Answer 1

var myselect = document.getElementByid('selectid');         
myselect.options[myselect.selectedIndex];

Answer 2

You can detect if the select field does not have the default value selected like this:

var selects = document.getElementsByTagName("select");
for (i=0;i<selects.length;i++) {
    if (selects[i].selectedIndex != 0) {
        eval(selects[i].getAttribute("onSelected"));
    }
}

Answer 3

To test for selected option on page load, you'll need to catch these in the window.onload handler

One the page is loaded you'll need to continue to use the onChange handler, but use selectedIndex property to test if this is populated with an index within your option list.

Alternatively give your options values in the HTML and check the values themselves. This will allow deterministic behavior when expanding the option list.

Answer 4

Yes, using the .options[] and .selectedIndex methods you can handle this cleanly and unobtrusively like so:

HTML

<select name="select" id="select">
    <option value="">...</option>
    <option value="1">One</option>
    <option value="2" selected="selected">Two</option>
</select>

JavaScript

window.onload = function(){
    var select = document.getElementById("select"), selected = select.value;
    select.onchange = function(){
        var val = select.options[select.selectedIndex].value;
        if(val != selected) {
            alert("Another value " + val + " was selected, which is not the same as the default value of " + selected);
        } else {
            alert("Same value as the default of " + selected + " was selected");
        }
    };
};

From within the JS, you can check and manipulate the val variable as you like.

Answer 5

If I understand, the task is to tell if an option has the selected attribute hard-coded into the HTML? If so, this should work:

function test () {
    var opts = document.getElementById("myselect").options;
    var i, len = opts.length;
    for(i = 0; i < len; i++) {
        if (opts[i].getAttribute("selected" ) != null ) { // opts[i] has the selected attribute
            change_other_select(i); // pass the option index to your other function
            break;
        }
    }
}

window.onload = test;

The trick is to distinguish between the selected property and the selected attribute, and also between a null value and an empty string.