Changing Selected Option in a Drop Down Menu in Javascript

Question

I have this code and I want to change the selected item,being Million(s), to something other than that. How would I do this?

    <td>
    <select name='list_" + i + "' id='list'> 
    <option value='0'>Trillion(s)</option> 
    <option value='1' selected='selected'>Billion(s)</option>
    <option value='2'>Million(s)</option>
    <option value = '3'>Below One Million</option>
    </select>
    </td>

Here is the lines of code im using to try to change the selected option

 for (var key in myObject) {
                if (myObject.hasOwnProperty(key)) {
                        if(document.getElementById("list_"+counter).innerHTML=="true"){
                                document.getElementById("c" + counter).value = myObject[key];
                                counter++;
                        }else{
                                if(myObject[key]>=1.0E12){
                                myObject[key]=myObject[key]/1.0E12;
                                //document.getElementById("list").value=counter;
                                //document.getElementById("list").getElementsbyTagName('option')[counter].value=counter;
                                counter++;
                                }
                                document.getElementById("c" + counter).value = myObject[key];
                        }
                }
        }

How do you want to change, can you explain with an example case? — Semih Eker, Feb 05 '14 at 00:51

Vivek · Accepted Answer · 2014-05-20T13:15:17.997

I may have understood your requirement wrong.

If you want to change the selected item then it is just matter of changing "selected" attribute.

Let say I want to change it to Trillion, then this is how the code will look like:

        <select name='list_" + i + "' id='list'> 
            <option value='0' selected='selected'>Trillion(s)</option> 
            <option value='1' >Billion(s)</option>
            <option value='2'>Million(s)</option>
            <option value = '3'>Below One Million</option>
        </select>

Now let say you want to change the selected item through pure javascript(NO JQUERY)

Here is full example, the selected item will change when you click button. Note: It is just a matter of changing the index.

<head>
    <title> Changing selected option in drop-down menu in JS</title>
    <script type="text/javascript">
        function changeSelected(){ 
            document.getElementById("list").selectedIndex = 1;
        };  
    </script>
</head>

<body>
    <p> Test string....</p>

    <td>
        <select name='list_" + i + "' id='list'> 
            <option value='0' selected='selected'>Trillion(s)</option> 
            <option value='1' >Billion(s)</option>
            <option value='2'>Million(s)</option>
            <option value = '3'>Below One Million</option>
        </select>

        <button onclick="changeSelected()">Try It</button>
    </td>
</body>

Sorry I guess I didnt ask the question correctly, I want to be able to change the selected option with a line of code,that line being in java, not by simply changing the code from the html. — lv47, Feb 05 '14 at 01:03
@Vivek, if you know how to answer the OP's clarified question, you should edit this post to answer it — mdewitt, Feb 05 '14 at 01:16
Also I found another soultion. Check it out -> http://stackoverflow.com/questions/7373058/how-to-change-the-selected-option-of-html-select-element — Vivek, Feb 05 '14 at 01:49

Changing Selected Option in a Drop Down Menu in Javascript

1 Answers1