4

関連するすべての「[私の]回答が既にある可能性のある質問」はjQueryを使用していますが、私は使用していません。

タグで選択したオプションの値を取得する簡単な方法はありますか<select multiple>、またはすべてのオプションをループして、どのオプションが選択されているかを確認し、手動で配列を作成する必要がありますか?

補足質問: をサポートせずselectElement.value、代わりに必要とするブラウザはどれselectElement.options[selectElement.selectedIndex].valueですか?

4

3 に答える 3

3

使用できますselect.selectedOptions。ただし、これは を返すHTMLCollectionため、文字列配列を取得するには、それをきれいにする必要があります。http://jsfiddle.net/9gd9v/

<select multiple>
  <option value="foo" selected>foo</option>
  <option value="bar">bar</option>
  <option value="baz" selected>baz</option>
</select>

と：

var select = document.querySelector("select");
var values = [].map.call(select.selectedOptions, function(option) {
  return option.value;
});
于 2012-09-30T14:17:19.030 に答える
0

ループして選択した値を取得したい場合は、次のように使用できます。

function loopSelected()
{
  var txtSelectedValuesObj = "";
  var selectedArray = new Array();
  var selObj = document.getElementById('selectID');
  var i;
  var count = 0;
  for (i=0; i<selObj.options.length; i++) {
    if (selObj.options[i].selected) {
      selectedArray[count] = selObj.options[i].value;
      count++;
    }
  }
  txtSelectedValuesObj = selectedArray;
  alert(txtSelectedValuesObj);  
}

この例を応用した例をここで見ることができます。

。

于 2012-09-30T14:25:14.203 に答える
0

また、イベントを介して選択したオプションをonchangeリアルタイムで追跡し、必要なときにいつでも収集することもできます. まだループしていることは認めますが、少なくとも、選択したオプションを取得する必要があるたびに実行しているわけではありません。また、単純であるという追加のボーナスがあります (とにかく、取得時間が来ます...)。作業フィドル: http://jsfiddle.net/cyg9Z/

var Test;
if (!Test) {
    Test = {
    };
}
(function () {
    Test.trackSelected = function (e) {
        var selector = document.getElementById('selector'),
            selected = [],
            i = 0;
        for (i = 0; i < selector.children.length; i += 1) {
            if (selector.children[i].selected) {
                selected.push(selector.children[i].value)
            }
        }
        selector.selMap = selected;
    };
    Test.addListeners = function () {
        var selector = document.getElementById('selector'),
            tester = document.getElementById('tester');
        selector.onchange = Test.trackSelected;
        tester.onclick = Test.testSelected;
    };
    Test.testSelected = function () {
        var div = document.createElement('div');
        div.innerText = document.getElementById('selector').selMap.join(', ');
        document.body.appendChild(div);
    };
    Test.addListeners();
}());​
于 2012-09-30T19:06:29.467 に答える