Mit dem jQuery Plugin chosen eine Benutzerfreundliche select Box erstellen.
In diesem Beispiel: Debian 8.11, PHP 5.6.39, jquery 3.2.1, chosen 1.8.7
Im Eingabefeld kann ein Suchbegriff eingegeben werden.
Screenshot:

Demo: jQuery Chosen Plugin
Download jQuery: Downloading jQuery
Download Chosen : https://github.com/harvesthq/chosen/releases
Die Plugins im php script laden (section):
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/chosen.jquery.min.js"></script>
sowie die css Stylesheets:
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/chosen.min.css" />
Das Plugin initialisieren:
<script type="text/javascript">
$(document).ready(function () {
$('.chosen-select').chosen({
no_results_text: "Kein Eintrag gefunden!"
});
});
</script>
.chosen-select = select class im Abschnitt <select …>
Die Beschreibung der Optionen findet man hier: Chosen options
Der Quelltext (Auszug) der php Form:
Im Original als table, hier wegen der Übersicht ohne Table tags. Die Buttons haben eine eigene css class. (class=xxx) Selbst definieren oder einfach weglassen.
$supplier_options="";
echo "<center>";
echo '<form name="add_suppl01" id="add_suppl01" method="post" action="'.$_SERVER['PHP_SELF'].'">';
//---chosen
echo'<div>';
echo'<select data-placeholder="Lieferant auswählen..." style="width:380px;" tabindex="0" name="sel_supplier" id="sel_supplier">';
echo'<option value=""></option>';
echo 'option value="1007">Ikea Wallau::65719 Hofheim am Taunus::Am Wandersmann </option>';
echo 'option value="1008">Segmüller::64331 Weiterstadt::Im Rödling 2</option>';
echo 'option value="1009">Amazon.de::Internet::</option>';
echo'</select>';
echo '</div>'; echo '';
//---END: chosen
echo '<input type=hidden name="sfe" value="2">';
echo '<input type="submit" name="submit" value="Lieferant auswählen">';
echo '<button class="button08" type="submit" formaction="/index.php">Abbrechen</button>';
echo '</form>';
Die Auswahl wird in der POST-Variablen sel_supplier übergeben. In der Form mit id und name definiert.
Im nächsten Schritt wird dann diese Variable ausgewertet:
if ($sfe == "2"){
//---- get selected record -->sel_supplier
$selectSupplier = isset($_POST['sel_supplier'])
? $_POST['sel_supplier']
: array();
echo 'DEBUG: Auswahl = :'.$selectSupplier;
.....
}
Gerade für längere Dropdowns ist diese Methode einfacher, da man im Eingabefeld bereits Suchbegriffe eingeben kann.