Standard select boxes
<select id="selectProgrammingLanguage">
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="java">JAVA</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="dotNet">.Net</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScipt</option>
<option value="react">React</option>
<option value="angular">Angular</option>
<option value="svelt">Svelt</option>
<option value="vue">Vue</option>
<option value="node">Node</option>
<option value="wordpress">Wordpress</option>
</select>
selectBox = new vanillaSelectBox("#selectProgrammingLanguage", {
"keepInlineStyles":true,
"maxHeight": 200,
"minWidth":678,
"search": true,
"placeHolder": "Choose..."
});
Select boxes with optgroups
<select id="frameworkCMS" multiple size="2" >
<optgroup label="Javascript">
<option>React</option>
<option>Vue</option>
<option>Angular</option>
<option>Svelt</option>
</optgroup>
<optgroup label="Python">
<option>Django</option>
<option>Flask</option>
<option>Bottle</option>
<option>Web2Py</option>
<option>CherryPy</option>
</optgroup>
<optgroup label="PHP">
<option>Laravel</option>
<option>CodeIgniter</option>
<option>Symfony</option>
<option>YII</option>
<option>CakePHP</option>
</optgroup>
</select>
let frameworkCMS = new vanillaSelectBox("#frameworkCMS", {
"maxHeight": 400,
"search": true,
translations: { "all": "All", "items": "Selected" },
"minWidth":178,
"placeHolder": "Choose..."
});
Choose Multiple Options
<select id="multipleSelect" multiple size="3">
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="java">JAVA</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="dotNet">.Net</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScipt</option>
<option value="react">React</option>
<option value="angular">Angular</option>
<option value="svelt">Svelt</option>
<option value="vue">Vue</option>
<option value="node">Node</option>
<option value="wordpress">Wordpress</option>
</select>
selectBox3 = new vanillaSelectBox("#multipleSelect", {
"minWidth":178,
"maxHeight": 200,
"search": true,
"stayOpen":true
});
Copyright © 2022 DesignReset, All rights reserved.
Coded with