Unobtrusive Dropdown Page Changer

Die Verwendung eines Dropdown-Menüs <select> zur Navigation ist heutzutage nicht mehr so ​​üblich wie früher, aber es ist immer noch vorhanden. Es wurde ziemlich stark dafür kritisiert, unzugänglich / aufdringlich zu sein. Tatsächlich sind viele der Skripte, die Sie dafür finden, so. Schade. Machen wir eines, das mit oder ohne JavaScript funktioniert!

Demo ansehen

Der AUFDINGLICHE Weg

<form>
    <select onchange="window.open(this.options[this.selectedIndex].value)">
        <option value="">Go to page...</option>
        <option value="https://css-tricks.de/">CSS-Tricks</option>
        <option value="http://digwp.com/">Digging Into WordPress</option>
        <option value="http://quotesondesign.com/">Quotes on Design</option>
    </select>
</form>

Inline JavaScript… es funktioniert, aber nur, wenn JavaScript aktiviert ist. Ohne JavaScript haben Sie ein Dropdown-Menü, das absolut nichts tut.

Der UNaufdringliche Weg

<form id="page-changer" action="" method="post">
    <select name="nav">
        <option value="">Go to page...</option>
        <option value="https://css-tricks.de/">CSS-Tricks</option>
        <option value="http://digwp.com/">Digging Into WordPress</option>
        <option value="http://quotesondesign.com/">Quotes on Design</option>
    </select>
    <input type="submit" value="Go" id="submit" />
</form>

Ziemlich ähnlich, aber kein Inline-JavaScript. Stattdessen geben wir dem Formular eine ID, die wir später zum Zielen verwenden werden. Das Formular POSTet jetzt an sich selbst, und wir haben einen Submit-Button hinzugefügt, sodass das Formular funktionsfähig ist. Das Select hat jetzt einen Namenswert, sodass beim Drücken des Submit-Buttons ein Wert POSTet wird.

Ganz oben auf unserer Seite prüfen wir auf einen POST-Wert aus diesem Formular. Wenn er vorhanden ist, leiten wir die Seite zu diesem Wert um.

<?php
	if (isset($_POST['nav'])) {
		 header("Location: $_POST[nav]");
	}
?>

Kein JavaScript erforderlich, die Seitenumleitung wird vollständig über serverseitiges PHP abgewickelt. **HINWEIS**: Dies ist nur die vereinfachte PHP-Methode. Sie sollten den übermittelten Wert wahrscheinlich bereinigen, bevor Sie ihn an die Header-Funktion übergeben (insbesondere wenn Sie PHP vor 4.4.2 oder 5.1.2 ausführen), um „Header-Injection“-Angriffe zu verhindern.

Mit nur wenigen Zeilen jQuery können wir es jedoch genauso verhalten lassen wie die aufdringliche Methode.

1. Verstecken Sie den Submit-Button.
2. Wenn das Select geändert wird…
3. Umleitung zum Wert der Option

$(function() {

    $("#submit").hide();

    $("#page-changer select").change(function() {
        window.location = $("#page-changer select option:selected").val();
    })

});

Demo ansehen

Update

Leser David Vandenbroek schreibt

Ich habe festgestellt, dass die Verwendung von

<select onChange="window.open(this.options[this.selectedIndex].value)"> 

ein Popup-Warnungsdialog öffnet und, wenn erlaubt, ein neues Fenster auf dem iPhone/iPad, wenn iOS Safari die Einstellung „Pop-ups blockieren“ auf AUS hat. Wenn die Einstellung auf EIN steht, passiert nichts.

Um beide unerwünschten Verhaltensweisen zu vermeiden, habe ich verwendet

<select onChange="window.location.replace(this.options[this.selectedIndex].value)"> 

stattdessen.