ページ更新時にjsを発動させ、プルダウンに合わせてh1の記述を変えたい

Question

ページ更新時にjsを発動させ、選択しているプルダウンに合わせてh1の記述を変えたく、下記の記述にしましたが、h1が変わりません。

なぜかわかりますでしょうか？

<h1 id="midashi">ここはh1</h1>

<select name="select" class="extraction" id="s">
  <option value="001.html">001</option>
  <option value="002.html">002</option>
</select>


<script>
$(document).ready( function(){
var h1_comment = document.getElementById( 'midashi' );
var select_val =  $(".extraction").val();

if (select_val === "001.html") {
h1_comment.textContent = h1_comment.textContent + "です001";
} else if  (select_val === "002.html") {
h1_comment.textContent = h1_comment.textContent + "です002";
}
});
</script>

Answer 1

プルダウンのchangeイベントで変更するようにしましょう。

$(document).ready( function(){
  var h1_comment = document.getElementById( 'midashi' );

  $('.extraction').change(function(){
    var select_val =  $(".extraction").val();
    if (select_val === "001.html") {
      h1_comment.textContent = h1_comment.textContent + "です001";
    } else if  (select_val === "002.html") {
      h1_comment.textContent = h1_comment.textContent + "です002";
    }
  })
});

Comments

[退会済みユーザー]

ありがとうございます。
ただ↑だとどんどんh1が足されて行ってしまいます。

「ここはh1です001です002です001です002です001です002」という感じで。

[hatena19]

元のコードが追加するようになってますから、そうなりますね。
追加ではなくご希望の形で上書きするように書き換えればいいでしょう。
どのような出力がご希望かはこちらでは分かりませんので。