it-swarm.com.de

Seite bei Auswahl aus dem Dropdown-Formular laden

Ich versuche ein Dropdown-Menü zu erstellen, das mich zu verschiedenen Webseiten führt. Im Moment ist es so eingerichtet, dass Sie Ihre Auswahl treffen und dann auf die Schaltfläche "Los" klicken und dann zum entsprechenden Link gelangen. Ich versuche herauszufinden, wie man das machen kann. Wenn Sie Ihre Auswahl treffen, wird sie automatisch deaktiviert und Sie müssen nicht die "Go" -Taste drücken.

Folgendes habe ich:

<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>

Jede Hilfe oder Links zu Erklärungen wäre toll. Vielen Dank!

18
JakeIC

Versuche Folgendes:

<select onchange="location = this.options[this.selectedIndex].value;">
    <option>Please select</option>
    <option value="http://www.Apple.com/">Apple</option>
    <option value="http://www.bbc.com">BBC</option>
    <option value="http://www.facebook.com">Facebook</option>
</select>​

Was Sie gesucht haben, war "onchange" anstelle von "onsubmit"

32
jacktheripper

Check out jQuery .change ()

<script>
   $('select.menu').change(function(e){
      // this function runs when a user selects an option from a <select> element
      window.location.href = $("select.menu option:selected").attr('value');
   });
</script>
2
Rodik

So etwas könnte hilfreich sein - im Grunde binden Sie einfach ein onChange -Ereignis an das select, sodass bei Auswahl einer neuen Option der Speicherort an die Seite weitergeleitet wird. 

<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>

<script type="text/javascript">
function gotoPage(select){
    window.location = select.value;
}
</script>
1

Ich würde empfehlen, dass Sie das Javascript-Framework jQuery verwenden, da es Ihnen das Leben in Bezug auf Javascript sehr erleichtert.

Wenn Sie jQuery auf Ihrer Webseite installiert und eingerichtet haben, sollten Sie Folgendes tun können:

<script type="text/javascript">
    $(document).ready(function() {
        $("#selection").change(function() {
            location = $("#selection option:selected").val();
        });
    });
</script>

<p align="center">
    <form name="jump" class="center">
        <select name="menu" id="selection>
            <option value="#">Select an option</option>
            <option value="/link1.shtml">Link 1</option>
            <option value="/link2.shtml">Link 2</option>
            <option value="/link3.shtml">Link 3</option>
        </select>
    </form>
</p>
1
Buddha

Offensichtlich zu spät zur Party hier, aber da ich versucht habe, das Gleiche herauszufinden und konnte, konnte ich hier posten.

Bei den anderen Antworten müssen Sie den Link laden, wenn Sie die Elementauswahloption ändern. Ursprünglich hatten Sie jedoch nach einer Auswahl dazu aufgefordert, dies mit einer Schaltfläche zu tun. Das hat für mich funktioniert:

<script type="text/javascript">
    $(document).ready(function() {
        var newUrl = "";
        $("#picksite").change(function() {
            $newUrl = $("#picksite option:selected").val();
        });
        $("#executelink").click(function() {
            location = $newUrl ;
        });
    });
</script>

<select id="picksite">
    <option value="">Pick A Website</option>
    <option value="http://google.com">Google</option>
    <option value="http://facebook.com">Facebook</option>
    <option value="http://Twitter.com">Twitter</option>
    <option value="http://gmail.com">Gmail</option>
</select>

<button id="executelink">Go To Site</button>

0
Andrew Willard