<p>Using core jQuery, how do you remove all the options of a select box, then add one option and select it?</p>

<p>My select box is the following.</p>

<pre><code>&lt;Select id="mySelect" size="9"&gt; &lt;/Select&gt;
</code></pre>

<p>EDIT: The following code was helpful with chaining. However, (in Internet&nbsp;Explorer) <code>.val('whatever')</code> did not select the option that was added. (I did use the same 'value' in both <code>.append</code> and <code>.val</code>.)</p>

<pre><code>$('#mySelect').find('option').remove().end()
.append('&lt;option value="whatever"&gt;text&lt;/option&gt;').val('whatever');
</code></pre>

<p>EDIT: Trying to get it to mimic this code, I use the following code whenever the page/form is reset. This select box is populated by a set of radio buttons. <code>.focus()</code> was closer, but the option did not appear selected like it does with <code>.selected= "true"</code>. Nothing is wrong with my existing code - I am just trying to learn jQuery.</p>

<pre><code>var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";
</code></pre>

<p>EDIT: selected answer was close to what I needed. This worked for me:</p>

<pre><code>$('#mySelect').children().remove().end()
.append('&lt;option selected value="whatever"&gt;text&lt;/option&gt;') ;
</code></pre>

<p>But both answers led me to my final solution..</p>

[{'answer_id': 47829, 'author': 'Matt', 'author_id': 2338, 'author_profile': 'https://Stackoverflow.com/users/2338', 'pm_score': 12, 'selected': True, 'text': '<pre><code>$(\'#mySelect\')\n    .find(\'option\')\n    .remove()\n    .end()\n    .append(\'&lt;option value="whatever"&gt;text&lt;/option&gt;\')\n    .val(\'whatever\')\n;\n</code></pre>\n'}, {'answer_id': 50412, 'author': 'Bobby Jack', 'author_id': 5058, 'author_profile': 'https://Stackoverflow.com/users/5058', 'pm_score': 6, 'selected': False, 'text': '<p>Not sure exactly what you mean by "add one and select it", since it will be selected by default anyway. But, if you were to add more than one, it would make more sense. How about something like:</p>\n\n<pre><code>$(\'select\').children().remove();\n$(\'select\').append(\'&lt;option id="foo"&gt;foo&lt;/option&gt;\');\n$(\'#foo\').focus();\n</code></pre>\n\n<p><strong>Response to "EDIT"</strong>: Can you clarify what you mean by "This select box is populated by a set of radio buttons"? A <code>&lt;select&gt;</code> element cannot (legally) contain <code>&lt;input type="radio"&gt;</code> elements.</p>\n'}, {'answer_id': 53013, 'author': 'Jay Corbett', 'author_id': 2755, 'author_profile': 'https://Stackoverflow.com/users/2755', 'pm_score': 4, 'selected': False, 'text': '<p>Thanks to the answers I received, I was able to create something like the following, which suits my needs. My question was somewhat ambiguous. Thanks for following up. My final problem was solved by including "selected" in the option that I wanted selected.</p>\n\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() {\r\n  $(\'#mySelect\').children().remove().end().append(\'&lt;option selected value="One"&gt;One option&lt;/option&gt;\') ; // clear the select box, then add one option which is selected\r\n  $("input[name=\'myRadio\']").filter( "[value=\'1\']" ).attr( "checked", "checked" ); // select radio button with value 1\r\n  // Bind click event to each radio button.\r\n  $("input[name=\'myRadio\']").bind("click",\r\n                                  function() {\r\n    switch(this.value) {\r\n      case "1":\r\n        $(\'#mySelect\').find(\'option\').remove().end().append(\'&lt;option selected value="One"&gt;One option&lt;/option&gt;\') ;\r\n        break ;\r\n      case "2":\r\n        $(\'#mySelect\').find(\'option\').remove() ;\r\n        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo\r\n        var options = \'\' ;\r\n        for (var i = 0; i &lt; items.length; i++) {\r\n          if (i==0) {\r\n            options += \'&lt;option selected value="\' + items[i] + \'"&gt;\' + items[i] + \'&lt;/option&gt;\';\r\n          }\r\n          else {\r\n            options += \'&lt;option value="\' + items[i] + \'"&gt;\' + items[i] + \'&lt;/option&gt;\';\r\n          }\r\n        }\r\n        $(\'#mySelect\').html(options);   // Populate select box with array\r\n        break ;\r\n    } // Switch end\r\n  } // Bind function end\r\n                                 ); // bind end\r\n}); // Event listener end</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;\r\n&lt;label&gt;One&lt;input  name="myRadio" type="radio" value="1"  /&gt;&lt;/label&gt;\r\n&lt;label&gt;Two&lt;input name="myRadio"  type="radio" value="2" /&gt;&lt;/label&gt;\r\n&lt;select id="mySelect" size="9"&gt;&lt;/select&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 947152, 'author': 'Hayden Chambers', 'author_id': 61509, 'author_profile': 'https://Stackoverflow.com/users/61509', 'pm_score': 5, 'selected': False, 'text': '<pre><code>$(\'#mySelect\')\n    .empty()\n    .append(\'&lt;option value="whatever"&gt;text&lt;/option&gt;\')\n    .find(\'option:first\')\n    .attr("selected","selected")\n;\n</code></pre>\n'}, {'answer_id': 1917744, 'author': 'Mahzilla', 'author_id': 233288, 'author_profile': 'https://Stackoverflow.com/users/233288', 'pm_score': 10, 'selected': False, 'text': '<pre><code>$(\'#mySelect\')\n    .empty()\n    .append(\'&lt;option selected="selected" value="whatever"&gt;text&lt;/option&gt;\')\n;\n</code></pre>\n'}, {'answer_id': 2040837, 'author': 'row1', 'author_id': 79835, 'author_profile': 'https://Stackoverflow.com/users/79835', 'pm_score': 6, 'selected': False, 'text': "<p>I had a bug in IE7 (works fine in IE6) where using the above jQuery methods would clear the <em>select</em> in the DOM but not on screen. Using the IE Developer Toolbar I could confirm that the <em>select</em> had been cleared and had the new items, but visually the <em>select</em> still showed the old items - even though you could not select them.</p>\n\n<p>The fix was to use standard DOM methods/properites (as the poster original had) to clear rather than jQuery - still using jQuery to add options.</p>\n\n<pre><code>$('#mySelect')[0].options.length = 0;\n</code></pre>\n"}, {'answer_id': 5481232, 'author': 'jvarandas', 'author_id': 487966, 'author_profile': 'https://Stackoverflow.com/users/487966', 'pm_score': 5, 'selected': False, 'text': '<pre><code>$("#control").html("&lt;option selected=\\"selected\\"&gt;The Option...&lt;/option&gt;");\n</code></pre>\n'}, {'answer_id': 15655982, 'author': 'mauretto', 'author_id': 487545, 'author_profile': 'https://Stackoverflow.com/users/487545', 'pm_score': 7, 'selected': False, 'text': "<p>If your goal is to remove all the options from the select except the first one (typically the 'Please pick an item' option) you could use:</p>\n\n<pre><code>$('#mySelect').find('option:not(:first)').remove();\n</code></pre>\n"}, {'answer_id': 19444202, 'author': 'Barun', 'author_id': 1251570, 'author_profile': 'https://Stackoverflow.com/users/1251570', 'pm_score': 2, 'selected': False, 'text': '<p>This will replace your existing mySelect with a new mySelect.</p>\n\n<pre><code>$(\'#mySelect\').replaceWith(\'&lt;Select id="mySelect" size="9"&gt;\n   &lt;option value="whatever" selected="selected" &gt;text&lt;/option&gt;\n   &lt;/Select&gt;\');\n</code></pre>\n'}, {'answer_id': 19962931, 'author': 'Shawn', 'author_id': 1807604, 'author_profile': 'https://Stackoverflow.com/users/1807604', 'pm_score': 7, 'selected': False, 'text': '<p>why not just use plain javascript?</p>\n\n<pre><code>document.getElementById("selectID").options.length = 0;\n</code></pre>\n'}, {'answer_id': 21497276, 'author': 'mehrdad', 'author_id': 2053048, 'author_profile': 'https://Stackoverflow.com/users/2053048', 'pm_score': 2, 'selected': False, 'text': '<p>Uses the jquery <a href="http://api.jquery.com/prop/" rel="nofollow">prop()</a> to clear the selected option</p>\n\n<pre><code>$(\'#mySelect option:selected\').prop(\'selected\', false);\n</code></pre>\n'}, {'answer_id': 26886200, 'author': 'Shiv', 'author_id': 1197461, 'author_profile': 'https://Stackoverflow.com/users/1197461', 'pm_score': 3, 'selected': False, 'text': '<p>How about just changing the html to new data.</p>\n\n<pre><code>$(\'#mySelect\').html(\'&lt;option value="whatever"&gt;text&lt;/option&gt;\');\n</code></pre>\n\n<p>Another example:</p>\n\n<pre><code>$(\'#mySelect\').html(\'\n    &lt;option value="1" selected&gt;text1&lt;/option&gt;\n    &lt;option value="2"&gt;text2&lt;/option&gt;\n    &lt;option value="3" disabled&gt;text3&lt;/option&gt;\n\');\n</code></pre>\n'}, {'answer_id': 29511141, 'author': 'marioosh', 'author_id': 404395, 'author_profile': 'https://Stackoverflow.com/users/404395', 'pm_score': 3, 'selected': False, 'text': '<p>I\'ve found on the net something like below. With a thousands of options like in my situation this is a lot faster than <code>.empty()</code> or <code>.find().remove()</code> from jQuery.</p>\n\n<pre><code>var ClearOptionsFast = function(id) {\n    var selectObj = document.getElementById(id);\n    var selectParentNode = selectObj.parentNode;\n    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy\n    selectParentNode.replaceChild(newSelectObj, selectObj);\n    return newSelectObj;\n}\n</code></pre>\n\n<p>More info <a href="http://www.somacon.com/p542.php" rel="noreferrer">here</a>.</p>\n'}, {'answer_id': 30917315, 'author': 'humbads', 'author_id': 553396, 'author_profile': 'https://Stackoverflow.com/users/553396', 'pm_score': 3, 'selected': False, 'text': "<p>Building on mauretto's answer, this is a little easier to read and understand:</p>\n\n<pre><code>$('#mySelect').find('option').not(':first').remove();\n</code></pre>\n\n<p>To remove all the options except one with a specific value, you can use this:</p>\n\n<pre><code>$('#mySelect').find('option').not('[value=123]').remove();\n</code></pre>\n\n<p>This would be better if the option to be added was already there.</p>\n"}, {'answer_id': 32859761, 'author': 'Jaydeep Shil', 'author_id': 3428626, 'author_profile': 'https://Stackoverflow.com/users/3428626', 'pm_score': 3, 'selected': False, 'text': '<ol>\n<li><p>First clear all exisiting option execpt the first one(--Select--)</p></li>\n<li><p>Append new option values using loop one by one</p>\n\n<pre><code>$(\'#ddlCustomer\').find(\'option:not(:first)\').remove();\nfor (var i = 0; i &lt; oResult.length; i++) {\n   $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + \'/\' + oResult[i].ID));\n}\n</code></pre></li>\n</ol>\n'}, {'answer_id': 39842290, 'author': 'Nadeem Manzoor', 'author_id': 1308493, 'author_profile': 'https://Stackoverflow.com/users/1308493', 'pm_score': 2, 'selected': False, 'text': '<p>You can do simply by replacing html</p>\n\n<pre><code>$(\'#mySelect\')\n.html(\'&lt;option value="whatever" selected&gt;text&lt;/option&gt;\')\n.trigger(\'change\');\n</code></pre>\n'}, {'answer_id': 40199412, 'author': 'Md. Russel Hussain', 'author_id': 4295653, 'author_profile': 'https://Stackoverflow.com/users/4295653', 'pm_score': 1, 'selected': False, 'text': "<p>Hope it will work</p>\n\n<pre><code>$('#myselect').find('option').remove()\n.append($('&lt;option&gt;&lt;/option&gt;').val('value1').html('option1'));\n</code></pre>\n"}, {'answer_id': 45085734, 'author': 'Jhon Intriago Thoth', 'author_id': 5598325, 'author_profile': 'https://Stackoverflow.com/users/5598325', 'pm_score': 3, 'selected': False, 'text': '<p>Another way:</p>\n\n<pre><code>$(\'#select\').empty().append($(\'&lt;option&gt;\').text(\'---------\').attr(\'value\',\'\'));\n</code></pre>\n\n<p>Under this link, there are good practices <a href="https://api.jquery.com/select/" rel="noreferrer">https://api.jquery.com/select/</a></p>\n'}, {'answer_id': 51920107, 'author': 'LN Nitharsan', 'author_id': 10222327, 'author_profile': 'https://Stackoverflow.com/users/10222327', 'pm_score': 1, 'selected': False, 'text': '<pre><code>var select = $(\'#mySelect\');\nselect.find(\'option\').remove().end()\n.append($(\'&lt;option/&gt;\').val(\'\').text(\'Select\'));\nvar data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];\nfor(var i in data) {\n    var d = data[i];\n    var option = $(\'&lt;option/&gt;\').val(d.id).text(d.title);\n    select.append(option);\n}\nselect.val(\'\');\n</code></pre>\n'}, {'answer_id': 52148696, 'author': 'Nifemi Sola-Ojo', 'author_id': 6155890, 'author_profile': 'https://Stackoverflow.com/users/6155890', 'pm_score': 2, 'selected': False, 'text': '<ul>\n<li>save the option values to be appended in an object</li>\n<li>clear existing options in the select tag</li>\n<li>iterate the list object and append the contents to the intended select tag</li>\n</ul>\n\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>var listToAppend = {\'\':\'Select Vehicle\',\'mc\': \'Motor Cyle\', \'tr\': \'Tricycle\'};\r\n\r\n$(\'#selectID\').empty();\r\n\r\n$.each(listToAppend, function(val, text) {\r\n    $(\'#selectID\').append( new Option(text,val) );\r\n  });</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&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': 52776203, 'author': 'Devkinandan Chauhan', 'author_id': 9715631, 'author_profile': 'https://Stackoverflow.com/users/9715631', 'pm_score': 3, 'selected': False, 'text': '<pre><code>$("#id option").remove();\n$("#id").append(\'&lt;option value="testValue" &gt;TestText&lt;/option&gt;\');\n</code></pre>\n\n<p>The first line of code will remove all the options of a select box as no option find criteria has been mentioned.</p>\n\n<p>The second line of code will add the Option with the specified value("testValue") and Text("TestText").</p>\n'}, {'answer_id': 54360083, 'author': 'michael01angelo', 'author_id': 5775650, 'author_profile': 'https://Stackoverflow.com/users/5775650', 'pm_score': 2, 'selected': False, 'text': '<p>I saw this code in Select2 - \n<a href="https://select2.org/programmatic-control/add-select-clear-items#clearing-selections" rel="nofollow noreferrer">Clearing Selections</a></p>\n\n<pre class="lang-js prettyprint-override"><code>$(\'#mySelect\').val(null).trigger(\'change\');\n</code></pre>\n\n<p>This code works well with jQuery even without Select2</p>\n'}, {'answer_id': 57069759, 'author': 'Kaushik shrimali', 'author_id': 9106811, 'author_profile': 'https://Stackoverflow.com/users/9106811', 'pm_score': 4, 'selected': False, 'text': "<blockquote>\n<p>Just one line to remove all options from the select tag and after you can add any options then make second line to add options.</p>\n</blockquote>\n<pre><code>$('.ddlsl').empty();\n\n$('.ddlsl').append(new Option('Select all', 'all'));\n</code></pre>\n<blockquote>\n<p>One more short way but didn't tried</p>\n</blockquote>\n<pre><code>$('.ddlsl').empty().append(new Option('Select all', 'all'));\n</code></pre>\n"}, {'answer_id': 63236844, 'author': 'Kamil Kiełczewski', 'author_id': 860099, 'author_profile': 'https://Stackoverflow.com/users/860099', 'pm_score': 0, 'selected': False, 'text': '<p>Try</p>\n<pre><code>mySelect.innerHTML = `&lt;option selected value=&quot;whatever&quot;&gt;text&lt;/option&gt;`\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>function setOne() {\n  console.log({mySelect});\n  mySelect.innerHTML = `&lt;option selected value="whatever"&gt;text&lt;/option&gt;`;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="setOne()" &gt;set one&lt;/button&gt;\n&lt;Select id="mySelect" size="9"&gt; \n &lt;option value="1"&gt;old1&lt;/option&gt;\n &lt;option value="2"&gt;old2&lt;/option&gt;\n &lt;option value="3"&gt;old3&lt;/option&gt;\n&lt;/Select&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 68149249, 'author': 'double_u1', 'author_id': 11914028, 'author_profile': 'https://Stackoverflow.com/users/11914028', 'pm_score': 0, 'selected': False, 'text': "<p>The shortest answer:</p>\n<pre><code>$('#mySelect option').remove().append('&lt;option selected value=&quot;whatever&quot;&gt;text&lt;/option&gt;');\n</code></pre>\n"}, {'answer_id': 68623771, 'author': 'Kazeem Quadri', 'author_id': 11084443, 'author_profile': 'https://Stackoverflow.com/users/11084443', 'pm_score': 2, 'selected': False, 'text': '<p>I used vanilla javascript</p>\n<pre><code>let select = document.getElementById(&quot;mySelect&quot;);\nselect.innerHTML = &quot;&quot;;\n</code></pre>\n'}, {'answer_id': 70946153, 'author': 'Carlos', 'author_id': 10145865, 'author_profile': 'https://Stackoverflow.com/users/10145865', 'pm_score': 2, 'selected': False, 'text': "<p>Cleaner give me Like it</p>\n<pre><code>   let data= []\n\n   let inp = $('#mySelect')\n        inp.empty()\n\n        data.forEach(el=&gt; inp.append(  new Option(el.Nombre, el.Id) ))\n</code></pre>\n"}, {'answer_id': 72759663, 'author': 'rsmdh', 'author_id': 10995048, 'author_profile': 'https://Stackoverflow.com/users/10995048', 'pm_score': 0, 'selected': False, 'text': "<p>Try</p>\n<pre><code>$('#mySelect')\n.html('&lt;option value=&quot;whatever&quot;&gt;text&lt;/option&gt;')\n.find('option:first')\n.attr(&quot;selected&quot;,&quot;selected&quot;);\n</code></pre>\n<p>OR</p>\n<pre><code>$('#mySelect').html('&lt;option value=&quot;4&quot;&gt;Value 4&lt;/option&gt;\n &lt;option value=&quot;5&quot;&gt;Value 5&lt;/option&gt;\n&lt;option value=&quot;6&quot;&gt;Value 6&lt;/option&gt;\n&lt;option value=&quot;7&quot;&gt;Value 7&lt;/option&gt;\n&lt;option value=&quot;8&quot;&gt;Value 8&lt;/option&gt;')\n.find('option:first')\n.prop(&quot;selected&quot;,true);\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/47824', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2755/']