<p>I have the following HTML <code>&lt;select&gt;</code> element:</p>

<pre><code>&lt;select id="leaveCode" name="leaveCode"&gt;
  &lt;option value="10"&gt;Annual Leave&lt;/option&gt;
  &lt;option value="11"&gt;Medical Leave&lt;/option&gt;
  &lt;option value="14"&gt;Long Service&lt;/option&gt;
  &lt;option value="17"&gt;Leave Without Pay&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Using a JavaScript function with the <code>leaveCode</code> number as a parameter, how do I select the appropriate option in the list?</p>

[{'answer_id': 78945, 'author': 'Mitchel Sellers', 'author_id': 13279, 'author_profile': 'https://Stackoverflow.com/users/13279', 'pm_score': 11, 'selected': True, 'text': '<p>You can use this function:</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>function selectElement(id, valueToSelect) {    \n    let element = document.getElementById(id);\n    element.value = valueToSelect;\n}\n\nselectElement(\'leaveCode\', \'11\');</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="leaveCode" name="leaveCode"&gt;\n  &lt;option value="10"&gt;Annual Leave&lt;/option&gt;\n  &lt;option value="11"&gt;Medical Leave&lt;/option&gt;\n  &lt;option value="14"&gt;Long Service&lt;/option&gt;\n  &lt;option value="17"&gt;Leave Without Pay&lt;/option&gt;\n&lt;/select&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>Optionally if you want to trigger onchange event also, you can use :</p>\n<pre><code>element.dispatchEvent(new Event(\'change\'))\n</code></pre>\n'}, {'answer_id': 78947, 'author': 'Chase Seibert', 'author_id': 7679, 'author_profile': 'https://Stackoverflow.com/users/7679', 'pm_score': 5, 'selected': False, 'text': "<p>Not answering the question, but you can also select by index, where i is the index of the item you wish to select:</p>\n\n<pre><code>var formObj = document.getElementById('myForm');\nformObj.leaveCode[i].selected = true;\n</code></pre>\n\n<p>You can also loop through the items to select by display value with a loop:</p>\n\n<pre><code>for (var i = 0, len &lt; formObj.leaveCode.length; i &lt; len; i++) \n    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;\n</code></pre>\n"}, {'answer_id': 78950, 'author': 'Lucas Oman', 'author_id': 6726, 'author_profile': 'https://Stackoverflow.com/users/6726', 'pm_score': -1, 'selected': False, 'text': '<p>I\'m afraid I\'m unable to test this at the moment, but in the past, I believe I had to give each option tag an ID, and then I did something like:</p>\n\n<pre><code>document.getElementById("optionID").select();\n</code></pre>\n\n<p>If that doesn\'t work, maybe it\'ll get you closer to a solution :P</p>\n'}, {'answer_id': 78954, 'author': 'mmattax', 'author_id': 1638, 'author_profile': 'https://Stackoverflow.com/users/1638', 'pm_score': 2, 'selected': False, 'text': "<pre>\n<code>\nfunction foo(value)\n{\n    var e = document.getElementById('leaveCode');\n    if(e) e.value = value;\n}\n</code>\n</pre>\n"}, {'answer_id': 78960, 'author': 'William', 'author_id': 9193, 'author_profile': 'https://Stackoverflow.com/users/9193', 'pm_score': 4, 'selected': False, 'text': '<pre><code>document.getElementById(\'leaveCode\').value = \'10\';\n</code></pre>\n\n<p>That should set the selection to "Annual Leave"</p>\n'}, {'answer_id': 78976, 'author': 'Stephen Wrighton', 'author_id': 7516, 'author_profile': 'https://Stackoverflow.com/users/7516', 'pm_score': 2, 'selected': False, 'text': "<p>Should be something along these lines:</p>\n\n<pre><code>function setValue(inVal){\nvar dl = document.getElementById('leaveCode');\nvar el =0;\nfor (var i=0; i&lt;dl.options.length; i++){\n  if (dl.options[i].value == inVal){\n    el=i;\n    break;\n  }\n}\ndl.selectedIndex = el;\n}\n</code></pre>\n"}, {'answer_id': 79040, 'author': 'Robert Swisher', 'author_id': 1852, 'author_profile': 'https://Stackoverflow.com/users/1852', 'pm_score': 1, 'selected': False, 'text': "<p>Why not add a variable for the element's Id and make it a reusable function?</p>\n\n<pre><code>function SelectElement(selectElementId, valueToSelect)\n{    \n    var element = document.getElementById(selectElementId);\n    element.value = valueToSelect;\n}\n</code></pre>\n"}, {'answer_id': 79528, 'author': 'Milan Babuškov', 'author_id': 14690, 'author_profile': 'https://Stackoverflow.com/users/14690', 'pm_score': 2, 'selected': False, 'text': '<p>Suppose your form is named <strong>form1</strong>:</p>\n\n<pre><code>function selectValue(val)\n{\n  var lc = document.form1.leaveCode;\n  for (i=0; i&amp;lt;lc.length; i++)\n  {\n    if (lc.options[i].value == val)\n    {\n        lc.selectedIndex = i;\n        return;\n    }\n  }\n}\n</code></pre>\n'}, {'answer_id': 79534, 'author': 'Andrew Hedges', 'author_id': 11577, 'author_profile': 'https://Stackoverflow.com/users/11577', 'pm_score': 5, 'selected': False, 'text': "<pre><code>function setSelectValue (id, val) {\n    document.getElementById(id).value = val;\n}\nsetSelectValue('leaveCode', 14);\n</code></pre>\n"}, {'answer_id': 4519880, 'author': 'Einar Ólafsson', 'author_id': 373032, 'author_profile': 'https://Stackoverflow.com/users/373032', 'pm_score': 7, 'selected': False, 'text': '<p>If you are using jQuery you can also do this:</p>\n\n<pre><code>$(\'#leaveCode\').val(\'14\');\n</code></pre>\n\n<p>This will select the <code>&lt;option&gt;</code> with the value of 14.</p>\n\n<hr>\n\n<p>With plain Javascript, this can also be achieved with two <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document#Methods" rel="noreferrer"><code>Document</code> methods</a>:</p>\n\n<ul>\n<li><p>With <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector" rel="noreferrer"><code>document.querySelector</code></a>, you can select an element based on a CSS selector:</p>\n\n<pre><code>document.querySelector(\'#leaveCode\').value = \'14\'\n</code></pre></li>\n<li><p>Using the more established approach with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById" rel="noreferrer"><code>document.getElementById()</code></a>, that will, as the name of the function implies, let you select an element based on its <code>id</code>:</p>\n\n<pre><code>document.getElementById(\'leaveCode\').value = \'14\'\n</code></pre></li>\n</ul>\n\n<p>You can run the below code snipped to see these methods and the jQuery function in action:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">\r\n<div class="snippet-code snippet-currently-hidden">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>const jQueryFunction = () =&gt; {\r\n  \r\n  $(\'#leaveCode\').val(\'14\'); \r\n  \r\n}\r\n\r\nconst querySelectorFunction = () =&gt; {\r\n  \r\n  document.querySelector(\'#leaveCode\').value = \'14\' \r\n  \r\n}\r\n\r\nconst getElementByIdFunction = () =&gt; {\r\n  \r\n  document.getElementById(\'leaveCode\').value=\'14\' \r\n  \r\n}</code></pre>\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>input {\r\n  display:block;\r\n  margin: 10px;\r\n  padding: 10px\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="leaveCode" name="leaveCode"&gt;\r\n  &lt;option value="10"&gt;Annual Leave&lt;/option&gt;\r\n  &lt;option value="11"&gt;Medical Leave&lt;/option&gt;\r\n  &lt;option value="14"&gt;Long Service&lt;/option&gt;\r\n  &lt;option value="17"&gt;Leave Without Pay&lt;/option&gt;\r\n&lt;/select&gt;\r\n\r\n&lt;input type="button" value="$(\'#leaveCode\').val(\'14\');" onclick="jQueryFunction()" /&gt;\r\n&lt;input type="button" value="document.querySelector(\'#leaveCode\').value = \'14\'" onclick="querySelectorFunction()" /&gt;\r\n&lt;input type="button" value="document.getElementById(\'leaveCode\').value = \'14\'" onclick="getElementByIdFunction()" /&gt;\r\n\r\n&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 5346940, 'author': 'Lana', 'author_id': 665322, 'author_profile': 'https://Stackoverflow.com/users/665322', 'pm_score': 2, 'selected': False, 'text': '<p>The easiest way if you need to:<br>\n1) Click a button which defines select option<br>\n2) Go to another page, where select option is<br>\n3) Have that option value selected on another page</p>\n\n<p><strong>1)</strong> your button links (say, on home page)</p>\n\n<pre><code>&lt;a onclick="location.href=\'contact.php?option=1\';" style="cursor:pointer;"&gt;Sales&lt;/a&gt;\n&lt;a onclick="location.href=\'contact.php?option=2\';" style="cursor:pointer;"&gt;IT&lt;/a&gt;\n</code></pre>\n\n<p>(where <strong>contact.php</strong> is your page with select options. Note the page url has ?option=1 or 2)</p>\n\n<p><strong>2)</strong> put this code on your second page (my case <strong>contact.php</strong>) </p>\n\n<pre><code>&lt;?\nif (isset($_GET[\'option\']) &amp;&amp; $_GET[\'option\'] != "") {\n$pg = $_GET[\'option\'];              \n} ?&gt;\n</code></pre>\n\n<p><strong>3)</strong> make the option value selected, depending on the button clicked</p>\n\n<pre><code>&lt;select&gt;\n&lt;option value="Sales" &lt;? if ($pg == \'1\') { echo "selected"; } ?&gt; &gt;Sales&lt;/option&gt;\n&lt;option value="IT" &lt;? if ($pg == \'2\') { echo "selected"; } ?&gt; &gt;IT&lt;/option&gt;\n&lt;/select&gt;\n</code></pre>\n\n<p>.. and so on.<br>\nSo this is an easy way of passing the value to another page (with select option list) through GET in url. No forms, no IDs.. just 3 steps and it works perfect.</p>\n'}, {'answer_id': 11905147, 'author': 'Toskan', 'author_id': 533426, 'author_profile': 'https://Stackoverflow.com/users/533426', 'pm_score': 4, 'selected': False, 'text': '<p>I compared the different methods:</p>\n\n<p><a href="https://jsfiddle.net/8sM7s/1/" rel="nofollow noreferrer">Comparison of the different ways on how to set a value of a select with JS or jQuery</a></p>\n\n<p>code:</p>\n\n<pre class="lang-js prettyprint-override"><code>$(function() {\n    var oldT = new Date().getTime();\n     var element = document.getElementById(\'myId\');\n    element.value = 4;\n    console.error(new Date().getTime() - oldT);\n\n    oldT = new Date().getTime();\n    $("#myId option").filter(function() {\n        return $(this).attr(\'value\') == 4;\n    }).attr(\'selected\', true);\n    console.error(new Date().getTime() - oldT);\n\n    oldT = new Date().getTime();\n    $("#myId").val("4");\n    console.error(new Date().getTime() - oldT);\n});\n</code></pre>\n\n<p>Output on a select with  ~4000 elements:</p>\n\n<ul>\n<li>1 ms  </li>\n<li>58 ms</li>\n<li>612 ms</li>\n</ul>\n\n<p>With Firefox 10. Note: The only reason I did this test, was because jQuery performed super poorly on our list with ~2000 entries (they had longer texts between the options).\nWe had roughly 2 s delay after a val()</p>\n\n<p>Note as well: I am setting value depending on the real value, not the text value.</p>\n'}, {'answer_id': 21422704, 'author': 'almyz125', 'author_id': 1253882, 'author_profile': 'https://Stackoverflow.com/users/1253882', 'pm_score': -1, 'selected': False, 'text': '<p>If using PHP you could try something like this:</p>\n\n<pre><code>$value = \'11\';\n$first = \'\';\n$second = \'\';\n$third = \'\';\n$fourth = \'\';\n\nswitch($value) {\n            case \'10\' :\n                $first = \'selected\';\n            break;\n            case \'11\' :\n                $second = \'selected\';\n            break;\n            case \'14\' :\n                $third = \'selected\';\n            break;\n            case \'17\' :\n                $fourth = \'selected\';\n            break;\n        }\n\necho\'\n&lt;select id="leaveCode" name="leaveCode"&gt;\n  &lt;option value="10" \'. $first .\'&gt;Annual Leave&lt;/option&gt;\n  &lt;option value="11" \'. $second .\'&gt;Medical Leave&lt;/option&gt;\n  &lt;option value="14" \'. $third .\'&gt;Long Service&lt;/option&gt;\n  &lt;option value="17" \'. $fourth .\'&gt;Leave Without Pay&lt;/option&gt;\n&lt;/select&gt;\';\n</code></pre>\n'}, {'answer_id': 30573683, 'author': 'lumi77', 'author_id': 236928, 'author_profile': 'https://Stackoverflow.com/users/236928', 'pm_score': 4, 'selected': False, 'text': '<p>I tried the above JavaScript/jQuery-based solutions, such as: </p>\n\n<pre><code>$("#leaveCode").val("14");\n</code></pre>\n\n<p>and</p>\n\n<pre><code>var leaveCode = document.querySelector(\'#leaveCode\');\nleaveCode[i].selected = true;\n</code></pre>\n\n<p>in an AngularJS app, where there was a <strong>required</strong> &lt;select&gt; element.</p>\n\n<p>None of them works, because the AngularJS form validation is not fired. Although the right option was selected (and is displayed in the form), the input remained invalid (<strong>ng-pristine</strong> and <strong>ng-invalid</strong> classes still present).</p>\n\n<p>To force the AngularJS validation, call jQuery <a href="https://api.jquery.com/change/" rel="noreferrer">change()</a> after selecting an option:</p>\n\n<pre><code>$("#leaveCode").val("14").change();\n</code></pre>\n\n<p>and</p>\n\n<pre><code>var leaveCode = document.querySelector(\'#leaveCode\');\nleaveCode[i].selected = true;\n$(leaveCode).change();\n</code></pre>\n'}, {'answer_id': 37445649, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': -1, 'selected': False, 'text': '<p>You most likely want this:</p>\n\n<pre><code>$("._statusDDL").val(\'2\');\n</code></pre>\n\n<p>OR</p>\n\n<pre><code>$(\'select\').prop(\'selectedIndex\', 3); \n</code></pre>\n'}, {'answer_id': 63377136, 'author': 'Ashutosh Tiwari', 'author_id': 12125692, 'author_profile': 'https://Stackoverflow.com/users/12125692', 'pm_score': 0, 'selected': False, 'text': "<p>Most of the code mentioned here didn't worked for me!</p>\n<p><strong>At last, this worked</strong></p>\n<p><em><strong>window.addEventListener</strong> is important, otherwise, your JS code will run before values are fetched in the Options</em></p>\n<pre><code>    window.addEventListener(&quot;load&quot;, function () {\n            // Selecting Element with ID - leaveCode  //\n            var formObj = document.getElementById('leaveCode');\n\n            // Setting option as selected\n            let len;\n            for (let i = 0, len = formObj.length; i &lt; len; i++){\n                if (formObj[i].value == '&lt;value to show in Select&gt;') \n                 formObj.options[i].selected = true;\n            }\n    });\n</code></pre>\n<p>Hope, this helps!</p>\n"}, {'answer_id': 63882977, 'author': 'Kamil Kiełczewski', 'author_id': 860099, 'author_profile': 'https://Stackoverflow.com/users/860099', 'pm_score': 4, 'selected': False, 'text': '<h1>Short</h1>\n<p>This is size improvement of <a href="https://stackoverflow.com/a/78960/860099">William answer</a></p>\n<pre><code>leaveCode.value = \'14\';\n</code></pre>\n<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">\r\n<div class="snippet-code snippet-currently-hidden">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>leaveCode.value = \'14\';</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="leaveCode" name="leaveCode"&gt;\n  &lt;option value="10"&gt;Annual Leave&lt;/option&gt;\n  &lt;option value="11"&gt;Medical Leave&lt;/option&gt;\n  &lt;option value="14"&gt;Long Service&lt;/option&gt;\n  &lt;option value="17"&gt;Leave Without Pay&lt;/option&gt;\n&lt;/select&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/78932', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/6340/']