jQuery $(this)でoptionの情報を取得する 備忘録
2020年9月16日
jQueryを利用して動的にoptionのdata()を取得したく調べた内容の備忘録です。
$(this)を利用して選択されたoptionを取得
classやIDを利用する場合はの記述は「$(‘.className option:selected’).val()」などですが「$(this)」を利用した場合、classやIDとは記述方法が異なっているようです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery</title> <select id="sel"> <option value="1" data-test="テスト1">テスト1</option> <option value="2" data-test="テスト2">テスト2</option> </select> <script src="*****/jquery.min.js"></script> <script> $(function() { $('.sel').on('change',function(){ $("option:selected", this).data('test'); $("option:selected", this).val(); }); }); </script> </body> </html> |
optionの情報を全て取得
ではoptionの情報を取得する場合は「each()」を利用すれば簡単に取得できます。
1 2 3 | $('.sel option').each(function() { $(this).val(); }); |
created by Rinker
jQueryをこよなく愛するトップクリエイターが基本的な仕組みから、実務で活かせる珠玉のテクニックまでを徹底詳解!経験に裏付けられた「わかりにくいポイント」を押さえた解説だから確かな基礎力と、実務で活かせる実践力を身につけられる!
created by Rinker
jQueryを使いこなせるようになるための学習書です。仕組みから、プラグインの使い方、イベントの実装とカスタマイズの方法まで、わかりやすく丁寧に解説しています。