Как получить все выбранные значения в окне множественного выбора?

Question

У меня есть элемент <select> с атрибутом multiple.Как я могу получить выбранные значения этого элемента с помощью JavaScript?

Вот что я пытаюсь:

function loopSelected() { 
    var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
    var selectedArray = new Array();
    var selObj = document.getElementById('slct'); 
    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.value = selectedArray;
}

Answer 1

Нет jQuery:

// Return an array of the selected opion values
// select is an HTML select element
function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

Быстрый пример:

<select multiple>
  <option>opt 1 text
  <option value="opt 2 value">opt 2 text
</select>
<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button>

Answer 2

Регистрация отъезда:

HTML:

<a id="aSelect" href="#">Select</a>
<br />
<asp:ListBox ID="lstSelect" runat="server"  SelectionMode="Multiple" Width="100px">
    <asp:ListItem Text="Raj" Value="1"></asp:ListItem>
    <asp:ListItem Text="Karan" Value="2"></asp:ListItem>
    <asp:ListItem Text="Riya" Value="3"></asp:ListItem>
    <asp:ListItem Text="Aman" Value="4"></asp:ListItem>
    <asp:ListItem Text="Tom" Value="5"></asp:ListItem>
</asp:ListBox>

JQUERY:

$("#aSelect").click(function(){
    var selectedValues = [];    
    $("#lstSelect :selected").each(function(){
        selectedValues.push($(this).val()); 
    });
    alert(selectedValues);
    return false;
});

НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ ВИДЕТЬ ДЕМО

Answer 3

ES6

[...select.options].filter(option => option.selected).map(option => option.value)

Где select - ссылка на элемент <select>.

Чтобы разбить его:

• [...select.options] берет список параметров, подобный массиву, и разрушает его, чтобы мы могли использовать для него методы Array.prototype (Редактировать: также рассмотреть возможность использования Array.from())
• filter(...) уменьшает опции только до тех, которые выбраны
• map(...) преобразует необработанные <option> элементы в их соответствующие значения

Answer 4

Почти так же, как уже предлагалось, но немного по-другому. Примерно столько же кода, сколько jQuery в Vanilla JS :

selected = Array.prototype.filter.apply(
  select.options, [
    function(o) {
      return o.selected;
    }
  ]
);

Это , кажется, быстрее , чем цикл в IE, FF и Safari. Интересно, что в Chrome и Opera он работает медленнее.

Другой подход будет использовать селекторы:

selected = Array.prototype.map.apply(
    select.querySelectorAll('option[selected="selected"]'),
    [function (o) { return o.value; }]
);

Answer 5

предположим, что multiSelect является Multiple-Select-Element, просто используйте его свойство selectedOptions:

//show all selected options in the console:

for ( var i = 0; i < multiSelect.selectedOptions.length; i++) {
  console.log( multiSelect.selectedOptions[i].value);
}

Answer 6

Вот реализация ES6 :

value = Array(...el.options).reduce((acc, option) => {
  if (option.selected === true) {
    acc.push(option.value);
  }
  return acc;
}, []);

Answer 7

Проверьте это:

HTML:

<select id="test" multiple>
<option value="red" selected>Red</option>
<option value="rock" selected>Rock</option>
<option value="sun">Sun</option>
</select>

Javascript однострочный код

Array.from(document.getElementById("test").options).filter(option => option.selected).map(option => option.value);

Answer 8

Опираясь на ответ Рика Вискоми , попробуйте использовать свойство selectedOptions элемента HTML Select *:

let txtSelectedValuesObj = document.getElementById('txtSelectedValues');
[...txtSelectedValuesObj.selectedOptions].map(option => option.value);

Подробнее

• selectedOptions возвращает список выбранных элементов.
• В частности, он возвращает только для чтения HTMLCollection , содержащий HTMLOptionElements .
• ... - это синтаксис распространения .Он расширяет элементы HTMLCollection.
• [...] создает изменяемый объект Array из этих элементов, давая вам массив HTMLOptionElements.
• map() заменяет каждыйHTMLObjectElement в массиве (здесь он называется option) со значением (option.value).

Плотный, но, похоже, работает.

Осторожно, selectedOptions не поддерживается IE!

Answer 9

Вы можете использовать [].reduce для более компактной реализации подхода RobG :

var getSelectedValues =  function(selectElement) {
  return [].reduce.call(selectElement.options, function(result, option) {
    if (option.selected) result.push(option.value);
    return result;
  }, []);
};

Answer 10

Вы можете попробовать этот скрипт

     <!DOCTYPE html>
    <html>
    <script>
    function getMultipleSelectedValue()
    {
      var x=document.getElementById("alpha");
      for (var i = 0; i < x.options.length; i++) {
         if(x.options[i].selected ==true){
              alert(x.options[i].value);
          }
      }
    }
    </script>
    </head>
    <body>
    <select multiple="multiple" id="alpha">
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
    </select>
    <input type="button" value="Submit" onclick="getMultipleSelectedValue()"/>
    </body>
    </html>