web-dev-qa-db-ja.com

ドロップダウンフォームから選択時にページを読み込む

さまざまなWebページに移動するドロップダウンメニューを作成しようとしています。今すぐセットアップされているので、選択してから「Go」ボタンを押すと、適切なリンクに移動します。選択を行うと自動的に移動し、「実行」ボタンを押す必要がないようにする方法を見つけようとしています。

ここに私が持っているものがあります：

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

ヘルプや説明へのリンクは素晴らしいでしょう。ありがとうございました！

javascripthtmlformsinput
20
JakeIC

以下を試してください：

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

あなたが探していたのは、「onsumbit」ではなく「onchange」でした

33
jacktheripper

チェックアウト 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

このようなことが役立つ場合があります-基本的には、onChangeイベントをselectに結び付けるだけで、新しいオプションが選択されたときに場所がページに転送されます。

<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
Jonathan LeBlanc

Javascriptのフレームワーク jQuery の使用を開始することをお勧めします。これにより、javascriptの使用が本当に簡単になります。

WebページにjQueryをインストールしてセットアップすると、次のようなことができるようになります。

<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

明らかにここのパーティーには遅すぎましたが、同じことを理解しようとしていてできたので、ここにその方法を投稿します。

他の回答では、要素の選択オプションを変更するときにリンクをロードしますが、選択を行った後に元々ボタンでそれを行うように要求していました。これは私のために働いた：

<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