Przejdź do innego adresu URL, klikając przycisk

Question

Potrzebuję utworzyć kod HTML, w którym jeśli użytkownik wybierze element z rozwijanej listy i kliknie przycisk, to przejdzie do odpowiedniego linku.

<select name="myList"> 
<option value="Google" />Google 
<option value="yahoo" />yahoo 
<option value="Ask" />Ask 
</select> 

jeśli użytkownik wybierze Google z rozwijanej listy i przycisk kliknięcia, a następnie strona powinna być przekierowany do www.google.com a jeśli wybiera Yahoo i kliknie przycisk powinien udać się do www.yahoo.com

Chciałbym wspomnieć, że potrzebuję przycisku w tym scenariuszu. Nie chcę iść na odpowiednią stronę z rozwijanej listy. Tylko po kliknięciu przycisku.

Z góry dziękuję.

Answer 1

HTML:

<select name="myList" id="ddlMyList"> 
    <option value="http://www.google.com">Google</option> 
    <option value="http://www.yahoo.com">Yahoo</option> 
    <option value="http://www.ask.com">Ask</option> 
</select> 

<input type="button" value="Go To Site!" onclick="NavigateToSite()" /> 

JavaScript:

function NavigateToSite(){ 
    var ddl = document.getElementById("ddlMyList"); 
    var selectedVal = ddl.options[ddl.selectedIndex].value; 

    window.location = selectedVal; 
} 

Można również otworzyć stronę w nowym oknie, w ten sposób:

function NavigateToSite(){ 
    var ddl = document.getElementById("ddlMyList"); 
    var selectedVal = ddl.options[ddl.selectedIndex].value; 

    window.open(selectedVal) 
} 

marginesie , twoje tagi opcji nie są poprawnie sformatowane. Nigdy nie powinieneś używać skrótu < ... />, gdy znacznik zawiera treść.

Answer 2

pierwsze, zmienić wartości do adresu URL opcję kierować:

<option value="http://www.google.com">Google</option> 
<option value="http://www.yahoo.com">Yahoo</option> 
<option value="http://www.ask.com">Ask</option> 

Następnie dodać identyfikator do select więc można kierować:

<select name="myList" id="myList"> 

Wreszcie dodaj Metoda onclick do kontroli wyboru w celu obsługi przekierowania:

<input type="button" onclick="document.location.href=document.getElementById('myList').value"> 

Answer 3

Za pomocą JavaScript można załączyć onclick Zdarzenie do przycisku. W procedurze obsługi zdarzeń można użyć instrukcji if, aby sprawdzić, która wartość została wybrana na liście select, i użyć window.location, aby przekierować użytkownika do odpowiedniego adresu URL.

Proponuję zmienić value elementów option jako wymagany adres URL, a następnie można po prostu pobrać wartość i przejść do tego adresu URL, zamiast sprawdzać, która opcja została wybrana.

Answer 4

<select name="myList"> 
    <option value="http://www.google.com">Google</option> 
    <option value="http://www.yahoo.com">Yahoo</option> 
    <option value="http://www.ask.com">Ask</option> 
</select> 

<input type="button" onclick="window.location=document.myList.value" /> 

Answer 5

onclick()="window.location.href='page.html'"