{"id":5196,"date":"2018-03-21T15:10:14","date_gmt":"2018-03-21T20:10:14","guid":{"rendered":"http:\/\/www.carnaghan.com\/?post_type=epkb_post_type_1&p=5196"},"modified":"2018-03-21T15:10:14","modified_gmt":"2018-03-21T20:10:14","slug":"how-to-remove-all-options-within-a-html-select-box-using-jquery","status":"publish","type":"epkb_post_type_1","link":"https:\/\/www.carnaghan.com\/knowledge-base\/how-to-remove-all-options-within-a-html-select-box-using-jquery\/","title":{"rendered":"How to remove all options within a Html select box using JQuery"},"content":{"rendered":"
You have a\u00a0html select box<\/strong>\u00a0“combo box<\/em>”\u00a0\u00a0<\/span><\/p>\n In order to remove all items using\u00a0JQuery<\/strong>\u00a0use the\u00a0JQuery<\/strong>\u00a0empty<\/strong><\/em>\u00a0function<\/p>\n Replace\u00a0selectBox<\/em><\/strong>\u00a0with the relevant\u00a0id<\/em><\/strong>\u00a0for the select box<\/p>\n If you wish to\u00a0empty<\/strong>\u00a0the\u00a0select box<\/strong>\u00a0and add a single\u00a0option<\/strong>\u00a0to the\u00a0select box<\/strong>, use\u00a0JQuery’s<\/strong>\u00a0append<\/strong><\/em>\u00a0function together with the\u00a0empty<\/strong><\/em>\u00a0function<\/p>\n This will add the New Option to the\u00a0select box<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":" You have a\u00a0html select box\u00a0“combo box”\u00a0\u00a0 <select id=”selectBox”> <option>1<\/option> <option>2<\/option> <option>3<\/option> <option>4<\/option> <\/select> In order to remove all items using\u00a0JQuery\u00a0use the\u00a0JQuery\u00a0empty\u00a0function $(‘#selectBox’).empty(); Replace\u00a0selectBox\u00a0with the relevant\u00a0id\u00a0for the select box If you wish to\u00a0empty\u00a0the\u00a0select box\u00a0and add a single\u00a0option\u00a0to the\u00a0select box, use\u00a0JQuery’s\u00a0append\u00a0function together with the\u00a0empty\u00a0function $(‘#selectBox’).empty().append(‘<option>New Option<\/option>’); This will add the New Option to the\u00a0select box.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"epkb_post_type_1_category":[4398],"epkb_post_type_1_tag":[],"yoast_head":"\n<select id=\"selectBox\">\r\n<option>1<\/option>\r\n<option>2<\/option>\r\n<option>3<\/option>\r\n<option>4<\/option>\r\n<\/select><\/pre>\n<\/div>\n<\/div>\n
$('#selectBox').empty();<\/pre>\n<\/div>\n<\/div>\n
$('#selectBox').empty().append('<option>New Option<\/option>');<\/pre>\n<\/div>\n<\/div>\n