ユーザーがselectタグを選択した場合のみイベントハンドラを有効にしたい

Question

selectタグで何を選択したかで、URLを遷移したいです。
このselectタグは、全てのページのHTMLが読み込むbase.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>の結果が表示されてしまうという点です。
ユーザーが意識的に選択した場合のみ有効となるイベントの設定方法はあるでしょうか。
ページ再読み込みの時までイベントが動いてしまうので、困っています。
対処方法がお分かりの方、よろしくお願いいたします。

Answer 1

ページを読み込んだだけなら .change() イベントは発生しません。
恐らく、動作として問題があるのは、初めから Yes の状態になっているために、Yes を選択しても change() イベントが発生しないということではありませんか？

よく使われる回避策として、プレースホルダーとなるダミーの選択肢を設定する方法があります。

<select type="select" id="test" name="test">
  <option value="" disabled selected>選択してください</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

$(function(){
    $("#test").change(function(){
        var name = $('#test').val()
        if(name == 'yes'){
            alert("yes");
        }
        else if(name == 'no'){
            alert("no");
        }
    });
});

こんな感じにすると、期待通りの動作になるのでは。
ご参考になれば。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
私が勘違いしていました。
ご指摘のとおり、はじめからYesの状態になっているため、Yesのchange()イベントが動かないというのが原因でした。
ダミーの選択肢を作るという解決策でもうまくいきますね。
ただ、私のサイトの場合、デフォルトをYesの状態にしようと思いますので、
テンプレート上、
<option value="{{a}}">{{a}}</option>
<option value="{{b}}">{{b}}</option>
とし、ページによって、{{a}}と{{b}}に入れる変数を変えるという対処をしてみようと思います。

Answer 2

サーバ側でどのように HTML を出力しているのかわかりませんが、

<select type="select" id="test" name="test">
    <option value="yes">Yes</option>
    <option value="no" selected="selected">No</option>
</select>

となるように HTML を吐き出せばよいのではないでしょうか。

あと、おそらく「イベントハンドラ」という用語を間違えて覚えていらっしゃるように見えます。もし「イベントハンドラ」という用語を正しく理解されているのだとしたら、提示されている情報が全然足りません。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ご教示頂いた方法だと、今度は、Noで固定されてしまいます。
おそらく、changeというのが間違っていると思います。
changeだと、ユーザーの意思で変更した場合だけでなく、ページの再読み込みの時にも反応してしまうからです。
「イベントハンドラ」という言葉が間違っていました。「イベント」とすべきでしたので、修正します。