form-js
Version:
Create better ui form elements. Supports IE9+, all modern browsers, and mobile.
65 lines (52 loc) • 1.44 kB
HTML
<html>
<head>
<style>
/* hide the dropdown options container initially */
select {
display: none;
}
.my-dropdown {
width: 200px;
height: 20px;
position: relative;
cursor: pointer;
}
.my-dropdown-options-container {
position: absolute;
top: 0;
left: 0;
display: none;
background: grey;
width: 100%;
height: auto;
}
/* when the dropdown options container is shown */
.my-dropdown-options-container-active .my-dropdown-options-container {
display: block;
}
.dropdown-option {
box-sizing: border-box;
padding: 6px 0;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<select>
<option value="MD">Maryland</option>
<option value="VA">Virginia</option>
<option value="DC">Washington, DC</option>
</select>
<script src="../dist/form.js"></script>
<script>
var dropdown = new Form.Dropdown({
el: document.getElementsByTagName('select')[0],
containerClass: 'my-dropdown',
optionsContainerClass: 'my-dropdown-options-container',
optionsContainerActiveClass: 'my-dropdown-options-container-active'
});
// set value to MD on load
dropdown.setValue('VA');
</script>
</body>
</html>