multiple有効時のselectedIndexの挙動

Tetsuro Aoki 304views 更新:2014年11月4日

select要素のmultiple属性を有効にすると複数選択が可能になりますが、この場合のselectedIndexの挙動について検証しました。

複数選択時にselectedIndexの値を取得

選択したoption要素のうち一番上の要素のインデックスのみ返されるようです。

複数選択時にselectedIndexに値を代入

代入したインデックスのoption要素のみselected=trueとなり他の要素はoption要素はselected=falseとなるようです。
つまり全ての選択がリセットされた上で、代入したインデックスの要素のみ選択状態になります。

複数選択時にJSから選択要素を追加したい場合はselectedIndexではなくoptionのselectedプロパティにtrueを代入する方が良いようです。
どうしてもselectedIndexに値を代入する必要がある場合は以下のように選択された要素を記憶して後から追加する方法があります。

var s_o = select.options;
var selected = new Array();
var idx = 0;
for(var i = 0; i < s_o.length; i++ ){
  if(s_o[i].selected){
    selected[idx] = i;
    idx++;
  }
}
s_o.selectedIndex = delta;
for(var i = 0; i < selected.length; i++){
  s_o[selected[i]].selected = true;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません