dynamically select value from drop down list

Question

I have the following drop down list:

<select name="selSS1" id="select_value">
    <option value="val0">sea zero</option>
    <option value="val1">sea one</option>
    <option value="val2">sea two</option>
    <option value="val3">sea three</option>
    <option value="val4">sea four</option>
</select>

I would like to dynamically select a value from that list using javascript:

I tried:

document.getElementById('select_value').selected ="val3";

But the above code does not seem to work. Any help is most appreciated.

You have to be familiar with the Javascript methods and properties — AmGates, Apr 02 '12 at 12:04
please check this http://stackoverflow.com/questions/1085801/how-to-get-selected-value-of-dropdownlist-using-javascript — PresleyDias, Apr 02 '12 at 12:06

AmGates · Accepted Answer · 2012-04-02T12:06:55.980

6

Use the following line:

 document.getElementById('select_value').value ="val3";

or 

    document.getElementById('select_value').selectedIndex = 3;

Hope this solves ur problem.

edited Apr 02 '12 at 12:06

answered Apr 02 '12 at 12:06

AmGates

2,127
16
29

well that code replaces the selected value it does not retrieve it, so the questions is wrong – Bogdan Emil Mariesan Apr 02 '12 at 12:13

score 1 · Answer 2 · edited Apr 02 '12 at 12:06

1

try:

var mySelect = document.getElementById('select_value');
mySelect.getElementsByTagName('option')[index].setAttribute('selected','selected');

where index stands for the position of the option you want to select.

edited Apr 02 '12 at 12:06

Code Maverick

20,171
12
62
114

answered Apr 02 '12 at 12:05

Th0rndike

3,406
3
22
42

score 1 · Answer 3 · edited Apr 02 '12 at 20:33

1

$('#select_value').val('val0');

edited Apr 02 '12 at 20:33

John Leehey

22,052
8
61
88

answered Apr 02 '12 at 12:34

Pratik Bhatt

871
1
8
21

Bogdan Emil Mariesan · Answer 4 · 2012-04-02T12:07:05.420

0

With plain JavaScript:

var element = document.getElementById("select_value");
var selectedValue = element.options[element.selectedIndex].value;

edited Apr 02 '12 at 12:07

answered Apr 02 '12 at 12:05

Bogdan Emil Mariesan

5,529
2
33
57

score 0 · Answer 5 · answered Apr 02 '12 at 12:07

0

Try it this way:

document.getElementById('select_value').option[3].selected;

answered Apr 02 '12 at 12:07

Rafael Marques

797
1
8
18

score 0 · Answer 6 · answered Apr 02 '12 at 12:11

0

THis will select val 3

document.getElementById('select_value').selectedIndex=3;

answered Apr 02 '12 at 12:11

Kunal Vashist

2,380
6
30
59

Javier Cobos · Answer 7 · 2012-04-02T12:25:36.703

If you want to set the selected one by the value, try this function. By declaring a function you will be able to use this functionality with any select :).

// Simplest version

function setSelected(select_id,value){

    document.getElementById(select_id).value = value;

}

// Or, complex version

function setSelected(select_id,value){

    var mySelect = document.getElementById(select_id);
    var options = mySelect.options;
    var key;
    for(key in options){

        if(options[key].value===value){
            options[key].setAttribute("selected","");
        }
        else
            options[key].removeAttribute("selected");
    }
}

in your case:

setSelected("select_value","val3");

dynamically select value from drop down list

7 Answers7