Öffnen Sie die geöffnete URL über select - jQuery

Antworten:

207

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>

.

Bemerkungen:

  • Die Frage gibt jQuery bereits an . Also halte ich andere Alternativen davon fern.
  • In älteren Versionen von jQuery (<1.7), können Sie ersetzen onmit bind.
  • Dies wird aus JavaScript-Tipps in Meligys Web Developers Newsletter extrahiert .

.

Meligy
quelle
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.
Rachel S
174

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>
Mark Eirich
quelle
Hallo @Mark, wie man die Option macht, wird ausgewählt, wenn sie umgeleitet wird,
jafar pinjar
@ jafar-pinjar Ich bin mir nicht sicher, was du fragst. Wahrscheinlich am besten, um eine neue Frage zu erstellen.
Mark Eirich
@ MarkEirich, hier ist meine Frage stackoverflow.com/questions/54037550/…
jafar pinjar
11

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.

Lars Tuff
quelle
9
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.

<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>
McHerbie
quelle
1
Sie können $(this).val()mit this.valueund url != ''mit ersetzen url !== ''.
Rahul
5

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>
MattoTodd
quelle
2
Sie können es viel einfacher machen, ohne jQuery onchange = "window.location = this.value;"
Hywak
5

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

robertparkerx
quelle
4

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>
joan16v
quelle
3

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>
Syed Muhammad Wasiq Saleem
quelle
3

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>
Shamshad Zaheer
quelle
2

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'));
    })
Prakash
quelle
2
<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);
}
Yıldıray ÜNLÜ
quelle
1

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>
Randhir Yadav
quelle
Kann dies funktionieren, wenn der Benutzer auf die Eingabetaste "Los" klickt?
wordpressdev_meg
1
**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>
M. Ganji
quelle
1

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>

Prafulla
quelle