jQueryで何番目のセレクトボックスが選択されたか(selectedIndex)

こんちは! basara669です。

レビューばっかりあげてたのに、いきなりJSネタを書きますw
ググったものは自分がハマったものとして書いておこうかなと思います。

今回はセレクトボックスの中の何番目の要素が選択されたかを調べる方法です。

やりたかったこと

下記の様なjsonがあって、

name_0[
  {
    id:"id",
    date:"date"
  },
  {
    id:"id",
    date:"date"
  },
  {
    id:"id",
    date:"date"
  },
],
name_1[
  {
    id:"id",
    date:"date"
  },
  {
    id:"id",
    date:"date"
  },
  {
    id:"id",
    date:"date"
  },
],
name_2[
  {
    id:"id",
    date:"date"
  },
  {
    id:"id",
    date:"date"
  },
  {
    id:"id",
    date:"date"
  },
]

セレクトボックスから選択をすると、クリックものindexを取り出し、同じ位置の配列を取り出し描画するということをやりたかったわけです。

やり方:selectedIndexを使う

調べたらやり方は簡単にわかりました。下記の用にするとセレクトボックスのindexを取得することが出来ます。

var index = $(e.target).prop("selectedIndex");

//別にIDやclassでも良いです。

var index2 = $("#select").prop("selectedIndex");

まぁ、知ってればすぐ出来て、知らないとつらいやつですね。

まとめ

あまり使う機会の多いものではないですが、SPAでセレクトボックスを使っているとたまに使っていたりするので、覚えておくためにもブログにしてみました。

Leave a Comment

お問い合わせ

お仕事の依頼や何か質問などあれば、こちらからお願いします〜。

Not readable? Change text.

Start typing and press Enter to search