How to select value in javascript dropdown?

Question

I have drop down like this

<select style="width: 280px" id="Mobility" name="Mobility"> <option selected="">Please Select</option> <option>K</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> 

I use this line to select the value that it works in Mozilla, and not in IE? Why doesn't it work?

 var element = document.getElementById("Mobility"); element.value = "10"; 

Answer 1

Use the selectedIndex property:

 document.getElementById("Mobility").selectedIndex = 12; //Option 10 

Alternative method:

Scroll through each value:

 //Get select object var objSelect = document.getElementById("Mobility"); //Set selected setSelectedValue(objSelect, "10"); function setSelectedValue(selectObj, valueToSet) { for (var i = 0; i < selectObj.options.length; i++) { if (selectObj.options[i].text== valueToSet) { selectObj.options[i].selected = true; return; } } } 

Answer 2

The easiest way is to simply use this

 document.getElementById("mySelect").value = "banana"; 

myselect is the name of your drop-down banana, this is just one of the items in the drop-down list

Answer 3

 function setSelectedIndex(s, v) { for ( var i = 0; i < s.options.length; i++ ) { if ( s.options[i].value == v ) { s.options[i].selected = true; return; } } } 

Where s is the dropdown menu and v is the value

Answer 4

The easiest solution if you know the meaning

 document.querySelector('option[value=" + value +"]').selected = true 

Answer 5

It can do it.

document.forms['someform'].elements['someelement'].value

Answer 6

I understand that this is an old question, but I will lay out a solution for my use case if others encounter the same situation as when implementing James Hill's answer (above) .

I found this question trying to solve the same problem. James's answer gave me 90%. However, for my use case, selecting an item from the drop-down list also caused an action on the page from the onchange drop-down menu. James's code , as written, did not trigger this event (at least in Firefox, which I tested). As a result, I made the following minor changes:

 function setSelectedValue(object, value) { for (var i = 0; i < object.options.length; i++) { if (object.options[i].text === value) { object.options[i].selected = true; object.onchange(); return; } } // Throw exception if option `value` not found. var tag = object.nodeName; var str = "Option '" + value + "' not found"; if (object.id != '') { str = str + " in //" + object.nodeName.toLowerCase() + "[@id='" + object.id + "']." } else if (object.name != '') { str = str + " in //" + object.nodeName.toLowerCase() + "[@name='" + object.name + "']." } else { str += "." } throw str; } 

Pay attention to the call to object.onchange() , which I added to the original solution . This calls the handler to verify that the action on the page is occurring.

Edit

Added code to exclude if the value parameter is not found; it is necessary for my use.

Answer 7

Using Javascript:

 document.getElementById('drpSelectSourceLibrary').value = 'Seven'; 

Using jquery:

 $('select').prop('selectedIndex', 3); // This will select the 4th option from the dropdown list 

Answer 8

Yes. As mentioned in the posts, the value property is non-standard and does not work with IE. For this you need to use the selectedIndex property. You can refer to the w3schools DOM link to see the properties of HTML elements. The following link will provide you with a list of properties that you can work with in the select element.

http://www.w3schools.com/jsref/dom_obj_select.asp

Update

This was not supported during 2011 in IE. As finnTheHuman commented, it is currently supported.

Answer 9

Instead of doing

 function setSelectedIndex(s, v) { for ( var i = 0; i < s.options.length; i++ ) { if ( s.options[i].value == v ) { s.options[i].selected = true; return; } } } 

I solved this problem by doing this

 function setSelectedValue(dropDownList, valueToSet) { var option = dropDownList.firstChild; for (var i = 0; i < dropDownList.length; i++) { if (option.text.trim().toLowerCase() == valueToSet.trim().toLowerCase()) { option.selected = true; return; } option = option.nextElementSibling; } } 

If you are working with strings, you should use the .trim() method, sometimes spaces can cause problems and are difficult to detect in javascript debugging sessions.

dropDownList.firstChild will be your first option tag. Then by executing option.nextElementSibling , you can move on to the next option tag, so the next choice is in the dropdownlist element. If you want to get the number of option tags, you can use dropDownList.length , which I used in the for loop.

Hope this helps someone.

Answer 10

Using a bit of ES6:

First get the parameters, filter the value based on the parameter and set the selected attribute to true.

 window.onload = () => { Array.from(document.querySelector('#Mobility').options) .filter(x => x.value === "12")[0] .setAttribute('selected', true); }; 

 <select style="width: 280px" id="Mobility" name="Mobility"> <option selected disabled>Please Select</option> <option>K</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> 

Answer 11

You can solve this with Javascript, for example:

 var newValue = "testing"; document.getElementById('id_Of_the_select_tag').value = value; 

Or with jquery like this:

 var newValue = "testing"; $("#id_Of_the_select_tag").val(newValue);