JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<select name="cars" multiple id="colorSelector">
	  <!--<option>Please select...</option>-->
  	  <option value="volvo">Volvo</option>
  	  <option value="saab" selected>Saab</option>
	  <option value="opel">Opel</option>
	  <option value="yeti" selected>Yeti</option>
	</select>
	<select name="cars" id="sizeSelector">
	  <!--<option selected>Please select...</option>-->
	  <option value="audi">Audi</option>
	  <option value="suzuki">Suzuki</option>
	  <option value="bmw">BMW</option>
	</select>
    <br/><br/>
	<input id="resetAttribute" value="reset" type="button" />

JavaScript

(function(){
			var prev_html = {};

			$("select[id$='Selector']").each(function (key, select) {
				prev_html[key] = '';
				if ($(select).prop("multiple")) {
					$(select).prepend("<option>Please Select...</option>");
				} else {
					$(select).prepend("<option selected>Please Select...</option>");
				}
		        $.each(select, function(index, option){
					prev_html[key] += option.outerHTML;
		        });
		    });

			$("#resetAttribute").on("click", function(){
				$("select[id$='Selector']").each(function (key, select) {
			        $(select).html(prev_html[key]);
			        if (!$(select).prop("multiple")) {
			        	$(select).each(function() { this.selectedIndex = 0 });
			        }
			    });
			});
		})();