html - ボタンをクリックすると別の URL に移動します

Question

ユーザーがドロップダウンリストからアイテムを選択してボタンをクリックすると、それぞれのリンクに移動するhtmlコードを作成する必要があります。

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

ユーザーがドロップダウン リストから Google を選択してボタンをクリックすると、ページはwww.google.comにリダイレクトされ、yahoo を選択してボタンをクリックするとwww.yahoo.comにリダイレクトされます。

このシナリオではボタンが必要です。ドロップダウン選択でそれぞれのサイトに移動したくありません。ボタンをクリックした後でのみ。

前もって感謝します。

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;
}

次のようにして、サイトを新しいウィンドウで開くこともできます。

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

    window.open(selectedVal)
}

補足として、オプション タグが適切にフォーマットされていません。タグにコンテンツが含まれている場合は、<... /> ショートカットを使用しないでください。

Answer 2

まず、オプションの値をターゲットにするURLに変更します。

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

次に、IDを選択に追加して、ターゲットにできるようにします。

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

最後に、onclickメソッドをselectコントロールに追加して、リダイレクトを処理します。

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

Answer 3

<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 4

onclickJavaScriptを使用すると、ボタンにイベントを添付できます。イベントハンドラーでは、ifステートメントを使用してselectリストで選択された値を確認し、を使用window.locationしてユーザーを適切なURLにリダイレクトできます。

value要素のoptionを必要なURLに変更することをお勧めします。そうすれば、選択されたオプションを確認する代わりに、値を取得してそのURLに移動できます。

Answer 5

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