JavaScriptで特定の行のOption要素の取得について

Question

Javascriptで複数あるOption要素の中から決まった行のOptionを取得する方法がわかりません。ご教授してもらえると助かります。

<select id="test_list" name="test_list" size="5">
   <option value="1"></option>
   <option value="2"></option>
   <option value="3"></option>
   <option value="4"></option>
   <option value="5"></option>
</select>

var structureItem = $("#_").children("option:selected");

上記のJavaScriptで選択されているOption要素を取ることはできたのですが、
その選択された上のOption要素を取得したいです。

宜しくお願いします。

Comments

[x_x]

#_はHTMLに存在しませんが、#test_listのことでしょうか？

[limitman80]

test_listのことです。記入したつもりができてませんでした。すいません。

Answer 1

.indexで指定した要素が何番目か取得できますので、あとは.eqで順番から抽出すればいいでしょう。

var $options = $('#test_list').find('option');
var selected = $options.index(':selected');

// いちばん上が選ばれていた場合は考えていません
var $item = $options.eq(selected - 1);

Comments

[limitman80]

一番上の場合は処理しないようにする予定です。
指定した項目の番号を取得してから取る方法ですね。
この方法が思いついたのですが、実現方法がわからなかったので助かります。

Answer 2

「上の」を「前の」と読み替えて

$("#test_list").children("option:selected").prev();

Comments

[limitman80]

こんなシンプルなやり方があったんですね。助かりました。

Answer 3

一番上が選択されている場合はどうするのでしょうね

document.addEventListener('change',function(e){
  var t=e.target;
  if(t.id=="test_list"){
    var idx=t.selectedIndex;
    var v=(idx==0)?null:t.options[idx -1].value;
    console.log(v);
  }
});

<select id="test_list" name="test_list" size="5">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>