web-dev-qa-db-ja.com

すべてのHTML選択<オプション>を介したJavascriptループ

このコードがオンラインで見つからないことに驚いています！

選択リストの選択したすべてのインデックスにアクセスするにはどうすればよいですか？最初のものだけじゃない？

HTML：

<select name="trends[]" multiple="multiple" id="trends" size="35"></select>

js：

function moveSelectedTrends()
{
     var selectedTrends = document.getElementById('trends');

     for(var i=0; i < selectedTrends.length; i++)
     {
       alert(selectedTrends.options[selectedTrends.selectedIndex].value) //ONLY returns the first selected element!
     }
}
javascripthtmlhtml-select
14
Mark Kennedy

ループを回避する簡単な方法の1つはQSAです。

[].forEach.call(  document.querySelectorAll('#trends :checked')  , function(Elm){
    alert(Elm.value);
})

：checkedセレクターは、<select>メニューを操作するのに十分スマートです...

12
dandavis

selectedTrends.selectedIndexの代わりにiを使用し、selectedかどうかをテストします。

   function moveSelectedTrends() {
     var trends = document.getElementById('trends'), trend, i;

     for(i = 0; i < trends.length; i++) {
       trend = trends[i];
       if (trend.selected) {
           alert(trend.value);
       }
     }
   }
15
Quentin