如何獲取多個 select 框的所有選定值？

Question

我有一個具有multiple屬性的<select>元素。 如何使用 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

使用 jQuery，通常的方式：

var values = $('#select-meal-type').val();

從文檔：

對於<select multiple="multiple">元素， .val()方法返回一個包含每個選定選項的數組；

Answer 3

實際上，我發現使用純 JavaScript（假設您不需要完全支持 IE lte 8）的最佳、最簡潔、最快和最兼容的方式如下：

var values = Array.prototype.slice.call(document.querySelectorAll('#select-meal-type option:checked'),0).map(function(v,i,a) { 
    return v.value; 
});

更新（2017-02-14）：

使用 ES6/ES2015 的更簡潔的方式（對於支持它的瀏覽器）：

const selected = document.querySelectorAll('#select-meal-type option:checked');
const values = Array.from(selected).map(el => el.value);

Answer 4

您可以使用selectedOptions屬性

 var options = document.getElementById('select-meal-type').selectedOptions; var values = Array.from(options).map(({ value }) => value); console.log(values);

 <select id="select-meal-type" multiple="multiple"> <option value="1">Breakfast</option> <option value="2" selected>Lunch</option> <option value="3">Dinner</option> <option value="4" selected>Snacks</option> <option value="5">Dessert</option> </select>

Answer 5

ES6

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

其中select是對<select>元素的引用。

分解它：

• [...select.options]采用類似數組的選項列表並對其進行解構，以便我們可以在其上使用 Array.prototype 方法（編輯：也可以考慮使用Array.from() ）
• filter(...)將選項減少到僅選擇的選項
• map(...)將原始<option>元素轉換為它們各自的值

Answer 6

如果你想要 go 現代方式，你可以這樣做：

const selectedOpts = [...field.options].filter(x => x.selected);

...運算符將可迭代對象 ( HTMLOptionsCollection ) 映射到數組。

如果您只對這些值感興趣，可以添加一個map()調用：

const selectedValues = [...field.options]
                     .filter(x => x.selected)
                     .map(x => x.value);

Answer 7

看看這個：

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 8

首先，使用Array.from將HTMLCollection object 轉換為數組。

let selectElement = document.getElementById('categorySelect')
let selectedValues = Array.from(selectElement.selectedOptions)
        .map(option => option.value) // make sure you know what '.map' does

// you could also do: selectElement.options

Answer 9

假設 multiSelect 是多選元素，只需使用它的 selectedOptions 屬性：

//show all selected options in the console:

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

Answer 10

$('#select-meal-type:selected')將包含所有選定項目的數組。

$('#select-meal-type option:selected').each(function() {
    alert($(this).val());
});

Answer 11

與已經建議的幾乎相同，但有點不同。 與Vanilla JS中的 jQuery 一樣多的代碼：

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 12

如果你需要響應變化，你可以試試這個：

document.getElementById('select-meal-type').addEventListener('change', function(e) {
    let values = [].slice.call(e.target.selectedOptions).map(a => a.value));
})

[].slice.call(e.target.selectedOptions)是必需的，因為e.target.selectedOptions返回一個HTMLCollection ，而不是一個Array 。 該調用將其轉換為Array ，這樣我們就可以應用map function 來提取值。

Answer 13

檢查這個：

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 14

2019 年 10 月更新

以下應該在所有現代瀏覽器上“獨立”工作，沒有任何依賴或轉換。

<!-- display a pop-up with the selected values from the <select> element -->

<script>
 const showSelectedOptions = options => alert(
   [...options].filter(o => o.selected).map(o => o.value)
 )
</script>

<select multiple onchange="showSelectedOptions(this.options)">
  <option value='1'>one</option>
  <option value='2'>two</option>
  <option value='3'>three</option>
  <option value='4'>four</option>
</select>

Answer 15

試試這個：

$('#select-meal-type').change(function(){
    var arr = $(this).val()
});

演示

 $('#select-meal-type').change(function(){ var arr = $(this).val(); console.log(arr) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="select-meal-type" multiple="multiple"> <option value="1">Breakfast</option> <option value="2">Lunch</option> <option value="3">Dinner</option> <option value="4">Snacks</option> <option value="5">Dessert</option> </select>

小提琴

Answer 16

如果你想在每個值后用中斷表示；

$('#select-meal-type').change(function(){
    var meals = $(this).val();
    var selectedmeals = meals.join(", "); // there is a break after comma

    alert (selectedmeals); // just for testing what will be printed
})

Answer 17

這是一個ES6實現：

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

Answer 18

基於Rick Viscomi的回答，嘗試使用 HTML Select 元素的selectedOptions屬性：

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

詳細地，

• selectedOptions返回所選項目的列表。
• 具體來說，它返回一個包含HTMLOptionElements 的只讀 HTMLCollection。
• ...是傳播語法。 它擴展了HTMLCollection的元素。
• [...]從這些元素創建一個可變Array object，為您提供一個HTMLOptionElements數組。
• map()將數組中的每個HTMLObjectElement （此處稱為option ）替換為其值( option.value )。

密集，但它似乎工作。

注意，IE 不支持selectedOptions ！

Answer 19

您可以在提交表單時獲取<select>中的值作為數組，如下例所示：

 const form = document.getElementById('form-upload'); form.addEventListener('change', (e) => { const formData = new FormData(form); const selectValue = formData.getAll('pets'); console.log(selectValue); })

 <form id="form-upload"> <select name="pets" multiple id="pet-select"> <option value="">--Please choose an option--</option> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select> </form>

Answer 20

你可以試試這個腳本

     <!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>

Answer 21

您可以使用[].reduce .reduce 來更緊湊地實現RobG 的方法：

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

Answer 22

我的模板助手看起來像這樣：

 'submit #update': function(event) {
    event.preventDefault();
    var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection
    var array_opts = Object.values(obj_opts);  //convert to array
    var stray = array_opts.map((o)=> o.text ); //to filter your bits: text, value or selected
    //do stuff
}

Answer 23

像下面這樣的東西是我的選擇：

let selectElement = document.getElementById('categorySelect');
let selectedOptions = selectedElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected);
let selectedValues = [].map.call(selectedOptions, option => option.value);

它很短，在現代瀏覽器上很快，我們不關心它在 1% 市場份額的瀏覽器上是否快速。

請注意，大約 5 年前，selectedOptions 在某些瀏覽器上有不穩定的行為，因此用戶代理嗅探在這里並非完全不合時宜。

Answer 24

與之前的答案相同，但使用 underscore.js。

function getSelectValues(select) {
    return _.map(_.filter(select.options, function(opt) { 
        return opt.selected; }), function(opt) { 
            return opt.value || opt.text; });
}

Answer 25

在沒有 jquery 的情況下無處不在：

var getSelectValues = function (select) {
    var ret = [];

    // fast but not universally supported
    if (select.selectedOptions != undefined) {
        for (var i=0; i < select.selectedOptions.length; i++) {
            ret.push(select.selectedOptions[i].value);
        }

    // compatible, but can be painfully slow
    } else {
        for (var i=0; i < select.options.length; i++) {
            if (select.options[i].selected) {
                ret.push(select.options[i].value);
            }
        }
    }
    return ret;
};

Answer 26

這里是 go。

const arr = Array.from(el.features.selectedOptions) //get array from selectedOptions property
const list = [] 
arr.forEach(item => list.push(item.value)) //push each item to empty array
console.log(list)

Answer 27

防暴js代碼

this.GetOpt=()=>{

let opt=this.refs.ni;

this.logger.debug("Options length "+opt.options.length);

for(let i=0;i<=opt.options.length;i++)
{
  if(opt.options[i].selected==true)
    this.logger.debug(opt.options[i].value);
}
};

//**ni** is a name of HTML select option element as follows
//**HTML code**
<select multiple ref="ni">
  <option value="">---Select---</option>
  <option value="Option1 ">Gaming</option>
  <option value="Option2">Photoshoot</option>
</select>

Answer 28

您可以使用選擇的 jquery 插件。

<head>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
 <script>
        jQuery(document).ready(function(){
            jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();
        });
 </script>
</head>

 <body> 
   <label for="Test" class="col-md-3 control label">Test</label>
      <select class="chosen" style="width:350px" multiple="true">
            <option>Choose...</option>
            <option>Java</option>                           
            <option>C++</option>
            <option>Python</option>
     </select>
 </body>

Answer 29

$('#application_student_groups option:selected').toArray().map(item => item.value)

Answer 30

您可以像這樣創建自己的 function 並在任何地方使用它

Pure JS

/**
* Get values from multiple select input field
* @param {string} selectId - the HTML select id of the select field
**/
function getMultiSelectValues(selectId) {
 // get the options of select field which will be HTMLCollection
 // remember HtmlCollection and not an array. You can always enhance the code by
 // verifying if the provided select is valid or not
  var options = document.getElementById(selectId).options; 
    var values = [];
    
   // since options are HtmlCollection, we convert it into array to use map function on it
    Array.from(options).map(function(option) {
        option.selected ? values.push(option.value) : null
    })

    return values;
}

您可以在一行中使用 jQuery 獲得相同的結果

$('#select_field_id').val()

這將返回井的值數組。

Answer 31

HTMLSelectElement.selectedOptions 示例- Web API | MDN

 let orderButton = document.getElementById("order"); let itemList = document.getElementById("foods"); let outputBox = document.getElementById("output"); orderButton.addEventListener("click", function() { let collection = itemList.selectedOptions; let output = ""; for (let i = 0; i < collection.length; i++) { if (output === "") { output = "Your order for the following items has been placed: "; } output += collection[i].label; if (i === (collection.length - 2) && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "You didn't order anything;". } outputBox;innerHTML = output, }; false);

 <label for="foods">What do you want to eat?</label><br> <select id="foods" name="foods" size="7" multiple> <option value="1">Burrito</option> <option value="2">Cheeseburger</option> <option value="3">Double Bacon Burger Supreme</option> <option value="4">Pepperoni Pizza</option> <option value="5">Taco</option> </select> <br> <button name="order" id="order"> Order Now </button> <p id="output"> </p>