2012-09-12 15 views
12

JavaScriptを使いこなそう私は、5つのオプションを持つ選択ドロップダウンのフォームを持っています。 オプション1オプション2 オプション3 オプション4 Option5' 選択肢の要素に基づいてフォームを別のURLにリダイレクト

私は任意のオプションは、ページのロードのデフォルトのものでなければなりません。オプション1から離れて選択されている場合は、別のURLにリダイレクトするためのフォームを持っている必要があります。

は事前

でいただきありがとうございます私はただ、選択ボックスのためonchnage Eventを使用し、次の

<form action="" id="main" name="main" method="get" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO"> 

<select id="Region" name="Region" tabindex="7"> 
    <option value="/url">Option1</option> 
    <option value="/url">Option2</option> 
    <option value="/url">Option3</option> 
    <option value="/url>Option4</option> 
    <option value="" selected="selected">Option5</option>' 
</select> 
+0

少なくとも3,534,153のチュートリアルとこれを行う方法に関する記事が必要です。 –

答えて

35

を使用しました。

<select id="selectbox" name="" onchange="javascript:location.href = this.value;"> 
    <option value="https://www.yahoo.com/" selected>Option1</option> 
    <option value="https://www.google.co.in/">Option2</option> 
    <option value="https://www.gmail.com/">Option3</option> 

</select> 

そして、選択されたオプションは、ページの読み込み時にロードするならば、いくつかのJavaScriptコードのjQueryのための

<script type="text/javascript"> 
    window.onload = function(){ 
     location.href=document.getElementById("selectbox").value; 
    }  
</script> 

追加:<select>タグから削除のonchangeイベントを

jQuery(function() { 
    // remove the below comment in case you need chnage on document ready 
    // location.href=jQuery("#selectbox").val(); 
    jQuery("#selectbox").change(function() { 
     location.href = jQuery(this).val(); 
    }) 
}) 
+0

jQueryだけを使って同じ結果を得たい場合は? – user1400854

+0

@ user1400854:解答を編集しました。 –

1

あなたが使用することができますこの簡単な方法

<select onchange="location = this.value;"> 
       <option value="/finished">Finished</option> 
       <option value="/break">Break</option> 
       <option value="/issue">Issues</option> 
       <option value="/downtime">Downtime</option> 
</select> 

は、URLをURLにリダイレクトして、.htmlページに誘導することも、リンク先に直接指定することもできます。valueをオプションで変更します。

関連する問題