jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

jQueryでフォームSELECTを操作する場合のあれこれ

2015年10月29日
この記事は掲載から663日経過しています。
情報が古い可能性が有りますのでご了承下さい

オーダーフォームなど、選択肢によってフォーム部品を変更する凝ったフォームを作成する機会が多く、自分用の虎の巻では対応し切れなくなってきたので、ちょっと纏めてみました。

先ずはSELECTに関して書いてみます。

サンプルはこちらに纏めてあります。

配列からフォームSELECTを作る

データベースから、例えばプラン名などを取り出してセレクトに設定したいケースなど。

valueを設定しない場合はもっと簡単ですが、こんな感じです。

で、なぜvalueを単純に1,2,3…とせず、id_1,id_2….としているかですが、javascriptで書いた連想配列のキーが数値の場合、その順序が担保されないようなのです。普通に順序通り並ぶと思いがちなのですが、ChromeやIEなどは勝手にソートしてくれちゃいます。Firefoxは順序通り。

なのでキーを文字列にしてid_を取り除き、順序通り並ぶようにしています。

 

選択されているものを得る

選択されたselectのvalueとtextを得ます。

 

SELECTに追加する

既にあるselectに対して前か後ろに追加します。

先頭に追加

後ろに追加

 

 指定した要素を削除する

selectから特定の要素を削除したい場合ですね。

 

全て削除する

空のselectに対して追加する場合は、最初に削除しておくとゴミが残りません。

 

何番目が選択されたかを得る

使用頻度はそう多くないと思いますが、何かの案件で良く使った気がするので。

 

このくらい覚えておけば後は応用で色々と使えると思います。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP