テキストフィールド（input text）にselectの値を設定するコード

jQueryでセレクト（select）で選択した値をテキストフィールドに表示するプログラムのメモ。

下のコードは、$(‘#gengo’).val()で、selectのoptionに設定したvaleuの値を取得してテキストフィールドに表示。

$(function() {
  $('#gengo').on('change', function() {
    var gengo = $('#gengo').val();
    $('#text').val(gengo);
  });
});

下のコードは、selectのoptionに設定したテキストの値を取得してテキストフィールドに表示。$(‘option:selected’).text()でoptionのテキストを取得、また$(‘:selected’).text()でも取得できます。

$(function() {
  $('#gengo').on('change', function() {
    var gengo = $('option:selected').text(); // or $(':selected').text();
    $('#text').val(gengo);
  });
});

HTMLの設定

<input type=text" id="text"></input>
<select id="gengo"> 
  <option value="meiji">明治</option> 
  <option value="taisho">大正</option> 
  <option value="shouwa">昭和</option>
  <option value="heisei" selected>平成</option> 
</select>

サンプル