質問編集履歴

1 イベントハンドラ→イベント

mulberryfields

mulberryfields score 805

2016/05/03 12:25  投稿

ユーザーがselectタグを選択した場合のみイベントハンドラを有効にしたい
selectタグで何を選択したかで、URLを遷移したいです。
このselectタグは、全てのページのHTMLが読み込むbase.htmlというhtmlに書いてあり、
各ページのヘッダーの所に表示される内容です。
```html
<!--base.html-->
<select type="select" id="test" name="test">
   <option value="yes">Yes</option>
   <option value="no">No</option>
</select>
<script>
$(function(){
   $("#test").change(function(){
       var name = $('#test').val()
       if(name == 'yes'){
           window.location.href = '{% url 'site:yes' %}'
       }
       else if(name == 'no'){
           window.location.href = '{% url 'site:no' %}'
       }
   });
});
</script>
```
問題は、ページ遷移をした瞬間、上に表示されている<option value="yes">Yes</option>が選択された状態になってしまうので、<option value="no">No</option>を選択したとしても、<option value="yes">Yes</option>の結果が表示されてしまうという点です。
ユーザーが意識的に選択した場合のみ有効となるイベントハンドラの設定方法はあるでしょうか。
ページ再読み込みの時までイベントハンドラが動いてしまうので、困っています。
ユーザーが意識的に選択した場合のみ有効となるイベントの設定方法はあるでしょうか。
ページ再読み込みの時までイベントが動いてしまうので、困っています。
対処方法がお分かりの方、よろしくお願いいたします。
  • jQuery

    12458 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る