セレクトボックスの内容を選択したときにfont-familyを変更したい

Question

セレクトボックスの内容を選択したときにfont-familyを変更したいです。
参考しながら以下のように書いてみたのですがうまくいきません。
浅学すぎて恐縮でございますがご教授頂ければ幸いです。

<select id="#fontselect"> <option value="1">フォントA</option> <option value="2">フォントB</option> <option value="3">フォントC</option> </select> <div class="text_preview"> あいうえお </div> <script> $(document).ready(function(){ $('#fontselect').on('change', function (e) { if(valueSelected=='1') { $('.text_preview').css('font-family', 'フォントA'); } else if (valueSelected=='2') { $('.text_preview').css('font-family', 'フォントB'); } }); }); </script>

Answer 1

一番ダメなのはid自体に#をつけていること（あるある）
valueSelectedもなんだかわからない

<script>
$(function(){
  $('#fontselect').on('change', function (e) {
    if($(this).val()=='1') {
      $('.text_preview').css('font-family', 'serif');
    }else if ($(this).val()=='2') {
      $('.text_preview').css('font-family', 'sans-serif');
    }else if ($(this).val()=='3') {
      $('.text_preview').css('font-family', 'monospace');
    }
  }).trigger('change');
});
</script>
<style>
.text_preview{font-size:200%}
</style>
<select id="fontselect">
<option value="1">明朝</option>
<option value="2">ゴシック</option>
<option value="3">等幅</option>
</select>
<div class="text_preview">
あいうえお
</div>

Answer 2

以下が間違っていました

• id="fontselect" ではなく id="#fontselect"
• $(this).val()でvalue(valueSelected)が取得できていない
• =='1' となっているが === '1'(厳密等価)を使用するべき
• $(document).ready(function(){ は間違えではないが通常は $(function() { で省略

<select id="fontselect">
  <option value="1">Font A</option>
  <option value="2">Font B</option>
  <option value="3">Font C</option>
</select>

<div class="text_preview" style="font-size: 3em;">
  Sample
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>
  $(function() {
    $('.text_preview').css('font-family', 'Impact');
    $('#fontselect').on('change', function() {
      var valueSelected = $(this).val();
      if (valueSelected === '1') {
        $('.text_preview').css('font-family', 'Impact');
      } else if (valueSelected === '2') {
        $('.text_preview').css('font-family', 'Georgia');
      }
    });
  });
</script>