JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<h2><a href="http://code-cocktail.in" target="blank">Code cocktail demo</h2>
<input type="text" id="trigger_select">
<a href="javascript:void(0);" id="trigger_select">show select box option</a>
<select id="listbox">
<option>List 1</option>
<option>List 2</option>
</select>
<div>
JavaScript
function ExpandSelect(select, maxOptionsVisible)
{
//
// ExpandSelect 1.00
// Copyright (c) Czarek Tomczak. All rights reserved.
//
// License:
// New BSD License (free for any use, read more at http://www.opensource.org/licenses/bsd-license.php)
//
// Project's website:
// http://code.google.com/p/expandselect/
//
if (typeof maxOptionsVisible == "undefined") {
maxOptionsVisible = 20;
}
if (typeof select == "string") {
select = document.getElementById(select);
}
if (typeof window["ExpandSelect_tempID"] == "undefined") {
window["ExpandSelect_tempID"] = 0;
}
window["ExpandSelect_tempID"]++;
var rects = select.getClientRects();
// ie: cannot populate options using innerHTML.
function PopulateOptions(select, select2)
{
select2.options.length = 0; // clear out existing items
for (var i = 0; i < select.options.length; i++) {
var d = select.options[i];
select2.options.add(new Option(d.text, i))
}
}
var select2 = document.createElement("SELECT");
//select2.innerHTML = select.innerHTML;
PopulateOptions(select, select2);
select2.style.cssText = "visibility: hidden;";
if (select.style.width) {
select2.style.width = select.style.width;
}
if (select.style.height) {
select2.style.height = select.style.height;
}
select2.id = "ExpandSelect_" + window.ExpandSelect_tempID;
select.parentNode.insertBefore(select2, select.nextSibling);
select = select.parentNode.removeChild(select);
if (select.length > maxOptionsVisible) {
select.size = maxOptionsVisible;
} else {
select.size =...