CODEWITHSUNDEEP
javascripthtmldomselecttags
pandoragami
pandoragami

Reputation: 5575

Changing the select tag options using the dom to a default value?

I have the following code where I'm trying to change the defaults for two select inputs and I'm expecting to get false for the first dialogue and hello for the second dialogue but something is not right.

This is the line in the code that is supposed to make the change

var vSelect = document.getElementById('select_1');
    vSelect.options[0].defaultSelected = 1; 

    vSelect = document.getElementById('select_2');
    vSelect.options[1].defaultSelected = 0;

Are the options[index] used for representing the states within each select tag or are they global indices for all the option tags within the page?

What I really want to do is to set a specific select tag to a default option without knowing the options index in the first place, let me know why that isn't possible if that's the case.

<html>
<head>  
</head>
<body onload = "default_settings()">
<style type = "text/css">
body
{
    background-color: white;
}
#select_1, #menu_select_label_id_1, #select_2, #menu_select_label_id_2
{  
    color:#64FFFF; 
    font-size:14px;         
    background: rgba(0,0,0,1.0);    
    text-align: left;
    max-width:90px;
    padding: 4px 4px;
}
</style>
<script language="JavaScript">
function default_settings() 
{           
    var vSelect = document.getElementById('select_1');
    vSelect.options[0].defaultSelected = 1; 

    vSelect = document.getElementById('select_2');
    vSelect.options[1].defaultSelected = 0; 
}
</script>
<select  id = "select_1">
    <option value = "0">true</option>
    <option  value = "1">false</option>
</select>
<label id = "menu_select_label_id_1" for = "select_1">
    boolean 
</label>
<br>
<select  id = "select_2">
    <option value = "0">hello</option>
    <option  value = "1">goodbye</option>
</select>
<label id = "menu_select_label_id_2" for = "select2">
    greeting
</label>
</body>
</html>

Upvotes: 1

Views: 1279

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075895

defaultSelected is a boolean property of the option element, indicating whether that option is the default option for the select.

So you only set it on the option you want to be the default, and you only set it to a truthy value (which will be coerced to true). It's not an index, and it's not a value.

Are the options[index] used for representing the states within each select tag or are they global indices for all the option tags within the page?

They're option elements (objects) within a specific select element.

What I really want to do is to set a specific select tag to a default option without knowing the options index in the first place, let me know why that isn't possible if that's the case.

To do that, you have to know something about the option (its value, its text) and then search through the options finding the matching one, and set its defaultSelected to true.

For instance: Here we're finding the option with the value "foo" and making it the default:

var options = theSelectBox.options;
var n;
for (n = 0; n < options.length; ++n) {
    if (options[n].value === "foo") {
        options[n].defaultSelected = true;
        break;
    }
}

Live Copy | Source

Upvotes: 1

Related Questions