jQuery is a powerful tool in that it allows us to select any DOM element and perform some action on it. In this example, I will show how to use jQuery to select IDs from select menus and a text field and reset them when clicking a div.<\/p>\n
<\/p>\n
This example shows how to reset a select menu to the default ‘selected’ option. Note that the selected option can be anywhere in the list of options, it doesn’t have to be the first option in the list. I won’t show the CSS, but it will be visible in the embedded codepen.<\/p>\n
HTML<\/strong><\/p>\n jQuery<\/strong><\/p>\n <\/p>\n Notice the jQuery changes HTML<\/strong><\/p>\n jQuery<\/strong><\/p>\n <\/p>\n Notice the jQuery replaces the text using HTML<\/strong><\/p>\n jQuery<\/strong><\/p>\n <\/p>\n Here are the examples, with full CSS in codepen:\u00a0<\/strong><\/p>\n \nSee the Pen How to use jQuery to reset select menus and text fields by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n <\/p>\n For more information about these jQuery features, see: jQuery is a powerful tool in that it allows us to select any DOM element and perform some action on it. In this example, I will show how to use jQuery to select IDs from select menus and a text field and reset them when clicking a div. Example 1 – Resetting selected This … Continue reading jQuery: How to use jQuery to reset select menus and text fields<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,128],"tags":[10,105,45,123,176,177],"class_list":["post-1859","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-jquery","tag-css","tag-html","tag-javascript","tag-jquery","tag-prop","tag-val"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1859"}],"version-history":[{"count":10,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1859\/revisions"}],"predecessor-version":[{"id":1869,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1859\/revisions\/1869"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<div class=\"container\">\r\n <h2 class=\"light-blue\">Example 1 - Resetting selected<\/h2>\r\n <select id=\"fruitSelect\">\r\n <option value=\"a\" selected>apple<\/option>\r\n <option value=\"b\">banana<\/option>\r\n <option value=\"c\">cherry<\/option>\r\n <option value=\"d\">date<\/option>\r\n <\/select>\r\n <div id=\"reset1\" class=\"reset\" style=\"cursor: pointer;\">Reset Menu<\/div>\r\n<\/div>\r\n<\/pre>\n
$(\"#reset1\").on(\"click\", function () {\r\n $('#fruitSelect option').prop('selected', function() {\r\n return this.defaultSelected;\r\n });\r\n});<\/pre>\nExample 2 – Resetting to the first option<\/strong><\/h4>\n
selectedIndex<\/code> to index 0:<\/p>\n<div class=\"container\">\r\n <h2 class=\"green\">Example 2 - Resetting to the first option<\/h2>\r\n <select id=\"stateSelect\">\r\n <option >Select a state you lived in<\/option>\r\n <option >California<\/option>\r\n <option >Oregon<\/option>\r\n <option >Florida<\/option>\r\n <option >North Dakota<\/option>\r\n <\/select>\r\n <div id=\"reset2\" class=\"reset\" style=\"cursor: pointer;\">Reset Menu<\/div>\r\n<\/div><\/pre>\n
$(\"#reset2\").on(\"click\", function () {\r\n $('#stateSelect').prop('selectedIndex', 0);\r\n});<\/pre>\nExample 3 – Resetting a text field<\/strong><\/h4>\n
.val(\"\")<\/code>.<\/p>\n<div class=\"container\">\r\n <h2 class=\"orange\">Example 3 - Resetting a text field<\/h2>\r\n <input type=\"text\" size=30 value=\"I typed some text here!\" id=\"textInput\">\r\n <br><br>\r\n <div id=\"reset3\" class=\"reset\" style=\"cursor: pointer;\">Clear Text Field<\/div>\r\n<\/div><\/pre>\n
$(\"#reset3\").on(\"click\", function () {\r\n $('#textInput').val(\"\");\r\n});<\/pre>\nExample 4 – Resetting all fields with one click
\n<\/strong><\/h4>\n\u00a0<\/strong><\/h4>\n
$(\"#reset4\").on(\"click\", function () {\r\n let selectMenus = ['fruitSelect', 'stateSelect'];\r\n let textFields = ['textInput'];\r\n for(i = 0; i < selectMenus.length; i++) {\r\n $('#' + selectMenus[i]).prop('selectedIndex', 0);\r\n }\r\n for(j = 0; j < textFields.length; j++) {\r\n $('#' + textFields[j]).val(\"\");\r\n }\r\n});<\/pre>\n
\nhttps:\/\/www.w3schools.com\/jsref\/prop_select_selectedindex.asp<\/a>
\nhttp:\/\/api.jquery.com\/?s=selectedIndex<\/a>
\nhttp:\/\/api.jquery.com\/prop\/<\/a>
\nhttps:\/\/www.w3schools.com\/jquery\/html_prop.asp<\/a>
\nhttp:\/\/api.jquery.com\/val\/<\/a>
\nhttps:\/\/www.w3schools.com\/jquery\/html_val.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"