Was wäre der beste Weg, um ein Ereignis so bei Änderung einer Auswahloption eine URL anzuhängen. Speichern Sie die href in einem attr und greifen Sie sie beim Wechsel?
$(function() {
// bind change event to select
$('#dynamic_select').on('change', function() {
var url = $(this).val(); // get selected valueif (url) { // require a URLwindow.location = url; // redirect
}
returnfalse;
});
});
<selectid="dynamic_select"><optionvalue=""selected>Pick a Website</option><optionvalue="http://www.google.com">Google</option><optionvalue="http://www.youtube.com">YouTube</option><optionvalue="https://www.gurustop.net">GuruStop.NET</option></select><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
></script>
Moderne jQuery 1.7+ -Versionen würden on () anstelle von bind () verwenden. $('#dynamic_select').on('change', function () {
Epascarello
Ich hatte bereits vor langer Zeit eine Notiz darüber (siehe Überarbeitungen der Antwort), habe sie aber entfernt, da sie bindnicht abgeschrieben wird. Da ich diesen Kommentar jedoch fast einen Tag nach dem Entfernen erhalten habe, habe ich ihn jetzt zurückgesetzt.
Meligy
danke, funktioniert perfekt. Gibt es eine Möglichkeit, im Auswahlfeld die ausgewählte Option anzuzeigen, nachdem das Änderungsereignis ausgelöst wurde?
Toontje
Ich denke, wenn Sie dies nicht tun return false, wird die ausgewählte Option dort beibehalten.
Meligy
Das funktioniert. Ich wollte nur hinzufügen, dass ich es zuerst ohne Schrägstrich / am Ende der URL versucht habe und es nicht funktioniert hat. Es braucht anscheinend diesen Schrägstrich.
Entschuldigung, aber hier ist zu viel Codierung im Gange ...
Ich werde Ihnen das einfachste kostenlos geben. Ich habe es 2005 erfunden, obwohl die Javascript-Quelle jetzt sagt, dass es ihre Mitarbeiter waren, die es erfunden haben - mehr als ein Jahr später!
Wie auch immer, hier ist es, kein Javascript !!!
<!-- Paste this code into the BODY section of your HTML document --><selectsize="1"name="jumpit"onchange="document.location.href=this.value"><optionselectedvalue="">Make a Selection</option><optionvalue="http://www.javascriptsource.com/">The JavaScript Source</option><optionvalue="http://www.javascript.com">JavaScript.com</option><optionvalue="http://www.webdeveloper.com/forum/forumdisplay.php?f=3">JavaScript Forums</option><optionvalue="http://www.scriptsearch.com/">Script Search</option><optionvalue="http://www.webreference.com/programming/javascript/diaries/">The JavaScript Diaries</option></select>
Geben Sie einfach eine beliebige URL oder eine relative URL (zum Speicherort der Seiten auf dem Server) ein. Dies funktioniert immer.
1. Daran ist nichts "erfunden". 2. Ich wäre schockiert, wenn Sie Geld dafür wollten. 3. Ich bezweifle, dass jemand anderes behauptet, "darauf gekommen zu sein".
Matsemann
3
"Javascript Quelle sagt jetzt, dass es ihre Mitarbeiter waren, die es erfunden haben" "Anayways, hier ist es, kein Javascript !!!" Ich bin jetzt ein
Paulus
3
Hut ab vor deinem Vertrauen. "Ich gebe dir das einfachste kostenlos", aww! ...
Amrinder Singh
3
"kein Javascript" - was denkst du document.location.href=this.valueist?
JC
10
Sie können dieses einfache Code-Snippet mit jQuery verwenden, um aus einem Dropdown-Menü umzuleiten.
<selectid="dynamic-select"><optionvalue=""selected>Pick a Website</option><optionvalue="http://www.google.com/">Google</option><optionvalue="http://www.youtube.com/">YouTube</option><optionvalue="http://www.stackoverflow.com/">Stack Overflow</option></select><script>
$('#dynamic-select').bind('change', function () { // bind change event to selectvar url = $(this).val(); // get selected valueif (url != '') { // require a URLwindow.location = url; // redirect
}
returnfalse;
});
</script>
Antworten:
Es ist ziemlich einfach, sehen wir uns ein funktionierendes Beispiel an:
<select id="dynamic_select"> <option value="" selected>Pick a Website</option> <option value="http://www.google.com">Google</option> <option value="http://www.youtube.com">YouTube</option> <option value="https://www.gurustop.net">GuruStop.NET</option> </select> <script> $(function(){ // bind change event to select $('#dynamic_select').on('change', function () { var url = $(this).val(); // get selected value if (url) { // require a URL window.location = url; // redirect } return false; }); }); </script>
Code-Snippet anzeigen
$(function() { // bind change event to select $('#dynamic_select').on('change', function() { var url = $(this).val(); // get selected value if (url) { // require a URL window.location = url; // redirect } return false; }); });
<select id="dynamic_select"> <option value="" selected>Pick a Website</option> <option value="http://www.google.com">Google</option> <option value="http://www.youtube.com">YouTube</option> <option value="https://www.gurustop.net">GuruStop.NET</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
.
Bemerkungen:
on
mitbind
..
quelle
$('#dynamic_select').on('change', function () {
bind
nicht abgeschrieben wird. Da ich diesen Kommentar jedoch fast einen Tag nach dem Entfernen erhalten habe, habe ich ihn jetzt zurückgesetzt.return false
, wird die ausgewählte Option dort beibehalten.Ich denke, das ist der einfachste Weg:
<select onchange="if (this.value) window.location.href=this.value"> <option value="">Pick one:</option> <option value="/foo">Foo</option> <option value="/bar">Bar</option> </select>
quelle
Entschuldigung, aber hier ist zu viel Codierung im Gange ...
Ich werde Ihnen das einfachste kostenlos geben. Ich habe es 2005 erfunden, obwohl die Javascript-Quelle jetzt sagt, dass es ihre Mitarbeiter waren, die es erfunden haben - mehr als ein Jahr später!
Wie auch immer, hier ist es, kein Javascript !!!
<!-- Paste this code into the BODY section of your HTML document --> <select size="1" name="jumpit" onchange="document.location.href=this.value"> <option selected value="">Make a Selection</option> <option value="http://www.javascriptsource.com/">The JavaScript Source</option> <option value="http://www.javascript.com">JavaScript.com</option> <option value="http://www.webdeveloper.com/forum/forumdisplay.php?f=3">JavaScript Forums</option> <option value="http://www.scriptsearch.com/">Script Search</option> <option value="http://www.webreference.com/programming/javascript/diaries/">The JavaScript Diaries</option> </select>
Geben Sie einfach eine beliebige URL oder eine relative URL (zum Speicherort der Seiten auf dem Server) ein. Dies funktioniert immer.
quelle
document.location.href=this.value
ist?Sie können dieses einfache Code-Snippet mit jQuery verwenden, um aus einem Dropdown-Menü umzuleiten.
<select id="dynamic-select"> <option value="" selected>Pick a Website</option> <option value="http://www.google.com/">Google</option> <option value="http://www.youtube.com/">YouTube</option> <option value="http://www.stackoverflow.com/">Stack Overflow</option> </select> <script> $('#dynamic-select').bind('change', function () { // bind change event to select var url = $(this).val(); // get selected value if (url != '') { // require a URL window.location = url; // redirect } return false; }); </script>
quelle
$(this).val()
mitthis.value
undurl != ''
mit ersetzenurl !== ''
.Hier ist, wie ich es machen würde
<select id="urlSelect" onchange="window.location = jQuery('#urlSelect option:selected').val();"> <option value="http://www.yadayadayada.com">Great Site</option> <option value="http://www.stackoverflow.com">Better Site</option> </select>
quelle
JS Fiddle Beispiel
$('#userNav').change(function() { window.location = $(':selected',this).attr('href') }); <select id="userNav"> <option></option> <option href="http://google.com">Goolge</option> <option href="http://duckduckgo.com">Go Go duck</option> </select>
Dies funktioniert für die href in einer ausgewählten Option
quelle
Ein anderer Weg:
<script type="text/javascript"> function change_url(val) { window.location=val; } </script> <select style="width:130px;" onchange="change_url(this.value);"> <option value="http://www.url1.com">Option 1</option> <option value="http://www.url2.com">Option 2</option> </select>
quelle
Ich glaube, der einfachste Weg, einen Ort innerhalb der Registerkarte "Auswählen" neu zu definieren, ist folgender:
<select onchange="location = this.value;"> <option value="https://www.google.com/">Home</option> <option value="https://www.bing.com">Contact</option> <option value="mypets.php">Sitemap</option> </select>
quelle
Super einfacher Weg ist wie folgt. Sie müssen keine Funktion erstellen.
<select onchange="window.location = this.options[this.selectedIndex].value"> <option value="">Switch Language</option> <option value="{{ url('/en') }}">English</option> <option value="{{ url('/ps') }}">پښتو</option> <option value="{{ url('/fa') }}">دری</option> </select>
quelle
Wenn Sie nicht möchten, dass die URL den Wert der Option angibt, gebe ich Ihnen ein Beispiel:
<select class="abc"> <option value="0" href="hello">Hell</option> <option value="1" href="dello">Dell</option> <option value="2" href="cello">Cell</option> </select> $("select").bind('change',function(){ alert($(':selected',this).attr('href')); })
quelle
<select name="xx" class="xxx" onchange="_name(this.options[this.selectedIndex].value,this.options[this.selectedIndex].getAttribute('rel'))"> <option value="x" rel="xy">aa</option> <option value="xxx" rel="xyy">bb</option> </select> //for javascript function _name(value,rel) { alert(value+"-"+rel); }
quelle
Versuchen Sie diesen Code, es funktioniert perfekt
<script> $(function() { $("#submit").hide(); $("#page-changer select").change(function() { window.location = $("#page-changer select option:selected").val(); }) }); </script> <?php if (isset($_POST['nav'])) { header("Location: $_POST[nav]"); } ?> <form id="page-changer" action="" method="post"> <select name="nav"> <option value="">Go to page...</option> <option value="http://css-tricks.com/">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>
quelle
**redirect on change option with jquery** <select id="selectnav1" class="selectnav"> <option value="#">Menu </option> <option value=" https://www.google.com"> Google </option> <option value="http://stackoverflow.com/"> stackoverflow </option> </select> <script type="text/javascript"> $(function () { $('#selectnav1').change( function() { location.href = $(this).val(); }); }); </script>
quelle
Probieren Sie diesen Code aus, der in Firefox, Chrome, IE funktioniert
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);"> <option value="" selected>---Select---</option> <option value="https://www.google.com">Google</option> <option value="https://www.google.com">Google</option> <option value="https://www.google.com">Google</option> <option value="https://www.google.com">Google</option>
quelle