【jQuery】selectの値を取得してinputに入れる

電脳備忘録

コンボボックスの値を値の変更時に指定したinputに表示させたときのメモ。
おそらくメールフォームではよく使うテクニックのような気がしますが、わたくしはformはめったにいじらないのでまぁまぁ調べました。

jQueryの「change」を使って指定したselectの値が変更されたときvalue値を取り出し、指定したテキストボックス(input)に格納しています。

<label for="input-position">役職*</label>
<select name="select-position" id="select-position">
<option value="社長">社長</option>
<option value="部長">部長</option>
<option value="課長">課長</option>
<option value="係長">係長</option>
<option value="一般社員">一般社員</option>
<option value="アルバイト">アルバイト</option>
<option value="その他">その他</option>
</select>
<input type="text" id="input-position" name="position">
<script>
$(function(){
//selectの値が変更された時の処理
$('[name=select-position]').change(function() {
//選択されているvalue値を取り出す
var position = $('[name=select-position]').val();
//テキストボックスに取り出したvalue値を入れる
$("#input-position").val(position);
});
});
</script>

あとはinputがselectの下に配置されるように見た目を調整しておしまい。

広告

ブログの維持費に充てるでございます・・・。