JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<html>
    <head>
<script>
  function clearSelected(){
    var elements = document.getElementById("ddBusinessCategory").options;
 
    for(var i = 0; i < elements.length; i++){
      if(elements[i].selected)
        elements[i].selected = false;
    }
  }
  </script>  
</head>


<body>
<select name="ddBusinessCategory" id="ddBusinessCategory" class="f1" style="width:280px;height:200px" multiple="multiple">
<option value="">Select One</option>
<optgroup label="Abrasives" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="4" selected="selected">Abrasives</option>
</optgroup>
<optgroup label="Abstracters" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="5">Abstracters</option>
</optgroup>
<optgroup label="Abuse Information &amp; Treatment Centers" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="6" selected="selected">Abuse Information &amp; Treatment Centers</option>
</optgroup>
<optgroup label="Accountants" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="7">Accountants</option>
<option value="2672">Certified Public Accountants - </option>
<option value="2673">Public Accountants - </option>
</optgroup>
<optgroup label="Accounting Services" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="8">Accounting Services</option>
</optgroup>
<optgroup label="Acoustical Materials - Wholesale &amp; Manufacturers" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="9">Acoustical Materials - Wholesale &amp; Manufacturers</option>
</optgroup>
</select>

<a href="#" onclick="clearSelected();">clear</a>

</body>
</html>