jQuery で取得するのは簡単ですが、場合によってはDOM を使えたほうがいい場面があるかもしれません。(name 属性を持つ要素であれば、document.getElementsByName の [0] を使ってエレメントを特定できます)
<script>
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<select name="font">
<option value="ArmedBanana">アームド・バナナ</option>
<option value="kirieji">切絵字1.0</option>
<option value="mofuji">モフ<b style='color:#f00;'>字</b>1.3</option>
<option value="minamoji">水面字1.1</option>
</select>
<input type="button" id="get_text" value="選択されたテキスト" />
<input type="text" id="result_text" />
<script type="text/javascript">
// ボタンのクリックイベント
$("#get_text").click( function() {
// ************************************************
// jQuery
// ************************************************
// コンボボックスそのもの
var combo = $('select[name="font"]');
// 選択されたコンボボックスのオプション
var combo_option = $('select[name="font"] option:selected');
// 選択された OPTION のテキスト
var selected_text = combo_option.text();
// 入力フィールドに、選択された OPTION のテキストをセット
$("#result_text").val(selected_text);
// 選択されたインデックス番号
var nIndex = combo.prop("selectedIndex");
console.log(nIndex);
// 選択されたインデックス番号をエレメントから取得した場合
var el = combo.get(0); // jQuery のオブジェクトから DOM( パターン1 )
console.log(el.selectedIndex);
el = combo[0]; // jQuery のオブジェクトから DOM( パターン2 )
console.log(el.selectedIndex);
el = document.getElementsByName("font")[0]; // DOM
console.log(el.selectedIndex);
// 選択されたテキストをエレメントから取得した場合
var childs = el.getElementsByTagName("option");
selected_text = childs[nIndex].firstChild.nodeValue;
console.log(selected_text);
});
</script>
タグ：jquery javascript
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
