JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/silviomoreto/bootstrap-select/master/bootstrap-select.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/silviomoreto/bootstrap-select/master/bootstrap-select.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<p>Clicking a button with <code>type="reset"</code> triggers a <code>reset</code> event on the form. bootstrap-select should listen for it and automatically update itself.
</p>
<p class="note">Click to show the &ldquo;real&rdquo; <code>&lt;select&gt;</code> elements: <button class="btn btn-success" type="button" id="reveal"><i class="glyphicon icon-eye-open"></i></button></p>

<form id="form1" class="form-inline">
    <legend>#form1: Broken reset</legend>
    <select class="selectpicker">
        <option value="">&mdash;</option>
        <option value="1">Plan 9 from Outer Space</option>
        <option value="2">Santa Claus Conquers the Martians</option>
    </select>
    <input type="reset" class="btn btn-primary"/>
</form>
    
<form id="form2" class="form-inline">
    <legend>#form2: Fixed reset</legend>
    <select class="selectpicker">
        <option value="">&mdash;</option>
        <option value="A">Manos: The Hands of Fate</option>
        <option value="B">Jaws: The Revenge</option>
    </select>
    <input type="reset" class="btn btn-primary"/>
</form>

CSS

form, p { margin: 20px; }
label { width: 40px; }
select { margin-bottom: 10px !important; float: left; clear: left; }
#reveal { margin-left: 4px; }
.note { line-height: 30px; vertical-align: middle; font-style: italic; }