jQueryで初期値を入れる

jQueryの勉強を引き続き実施。今回は値を変更する『.val()』メソッドを使って実装。ページを表示したときにテキスト欄と選択肢にあらかじめ初期値が入るものに仕上げたので備忘録。
今回はスケジュール画面に表示されている件名の初期値と、頻度の高い相手を選択肢の初期値として設定しているイメージです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
※画面上に表示されている画像は、32px×32pxの画像を準備しています。適当なものを準備してみてください。

今回の内容

STEP1.ページを表示したときにテキスト欄と選択肢に値を入れる。
jq11_1

スポンサーリンク
スポンサーリンク




STEP1-1. 画面を作成する

まずは、スケジュール画面に表示されるタイトル、アイコン、相手先の選択肢を作ります。
入力するアイテムそれぞれにidを付与しておきます。
今回は、一時的なものなのでcssもhtmlファイル内に書いていきます。
以下、htmlファイルの中身です。

・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
}
#s-btn:focus{
outline: none;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div class="row">
<div class="col-sm-6">
<p><label>タイトル</label><br>
<input type="text" class="form-control" value="" id="title"></p>
<p><label>アイコン</label><br>
<input type="radio" name="icon" value="会議" id="mtg"><label for="mtg"><img src="./img/icon1.png" style="margin:0 10px;" title="会議"></label>
<input type="radio" name="icon" value="飛び込み" id="noapo"><label for="noapo"><img src="./img/icon2.png" style="margin:0 10px;" title="飛び込み"></label>
<input type="radio" name="icon" value="集金" id="money"><label for="money"><img src="./img/icon3.png" style="margin:0 10px;" title="集金"></label>
<input type="radio" name="icon" value="定期訪問" id="teiki"><label for="teiki"><img src="./img/icon4.png" style="margin:0 10px;" title="定期訪問"></label></p>
<p><label>顧客選択</label><br>
<select id="occupation" name="occupation" style="width: 100%; height:34px;">
<option value="" selected="selected"></option>
<option value="1">株式会社●●物産[code-A000001]</option>
<option value="2">株式会社●●建設[code-B000002]</option>
<option value="3">株式会社●●工務店[code-C000003]</option>
</select>
</p>
<p><button class="btn" id="s-btn">登録</button></p>
</div>
</div>
</div> 

ここまでだと、以下の画像みたいになっていると思います。↓
jq11_2

続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。

・・・・・省略・・・・・
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="sample.js"></script>
</body>

STEP1-2. jQueryでページを表示したときにテキスト欄と選択肢に値を入れる

jQueryでページを表示したときにテキスト欄と選択肢に値を入れていきます。
さっそく『.val()』メソッドを使用します。今回はテキスト欄に「会議」、選択肢は3つ目を選択するようにします。
以下の内容を「sample.js」に記述します。

//初期値を表示する。
$(function(){
	$('#title').val('会議');
	$('#occupation').val('3');
}); 

どうですか?
以下の画像みたいにテキスト欄と選択肢に値がはいっていたらOKです。
※値がはいっていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
jq11_1

今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓

デモサイト

デモサイト

スポンサーリンク
スポンサーリンク




シェアする

フォローする

スポンサーリンク
スポンサーリンク