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

我有一個<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; 
}

來源

2011-05-03 Tijo K Varghese

你可能會節省了很多時間尋找在谷歌的標題的一半... http://www.google.com/search ？q =獲得+所有+所選+值+ + +多個+選擇 – neurino 2011-05-03 07:07:41

您有任何代碼寫入？有了這將很容易幫助:) – Nobita 2011-05-03 07:08:10

function loopSelected（） \t { \t \t var txtSelectedValuesObj = document.getElementById（'txtSelectedValues'）; \t \t var selectedArray = new Array（）; \t \t var selObj = document.getElementById（'slct'）; \t \t var i; \t \t var count = 0; \t \t爲（I = 0;我 2011-05-03 07:20:14

沒有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>

來源

2011-05-03 08:58:08 RobG

謝謝你的回答。你能幫我介紹一下嗎？我想我理解它的大部分內容，但是'var options = select && select.options;'做了什麼？在我**的經驗不足**中，我預計是'var options = select.options;' – TecBrat 2014-01-22 20:13:22

+11

'select'不是JavaScript中最好的變量名稱。 – VisioN 2014-03-05 11:12:28

@TecBrat'var options = select && select.options'確保select在訪問其屬性之前不是未定義的。 – Qwerty 2015-08-11 11:23:07

入住一下：

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; 
});

CLICK HERE TO SEE THE DEMO

來源

2011-05-03 07:16:49 Sukhjeevan

不是粉絲 - 「HTML」不是HTML（可讀，但不是HTML），答案要求添加JQuery作爲依賴項。 – Iiridayn 2017-12-29 23:55:14

差不多一樣已經建議，但有點不同。關於在Vanilla JS的代碼量的jQuery：

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

它seems to be faster比IE，FF和Safari的循環。我覺得有趣的是，它在Chrome和Opera中速度較慢。

另一種方法是使用選擇：

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

來源

2013-08-28 16:31:28 uKolka

是不是已經在Javascript中的第一個功能？ – 2016-03-07 16:28:44

嗯......香草JS ......嗯......？什麼？？！？！？！ – 2016-03-07 16:32:11

好吧，明白了。但第一個可以更短。只需'select.selectedOptions'。 – 2016-03-07 16:34:42

同前面的答案，但使用underscore.js。

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

來源

2013-10-08 18:39:31

想多選是多選擇-元素，只需使用其selectedOptions物業：

//show all selected options in the console: 

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

來源

2015-12-28 15:07:35 KAFFEECKO

不僅僅是發佈代碼，而是增加代碼工作方式的細節。 – Phiter 2015-12-28 15:12:24

@PhiterFernandes ok ...我認爲這很明顯 – KAFFEECKO 2015-12-28 15:50:40

請不要把代碼片段只用於JS，它沒有HTML沒有意義，只給出錯誤 – 2015-12-28 16:01:54

你可以試試這個腳本

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

來源

2016-04-14 10:44:00

您可以使用[].reduce爲RobG's approach的更緊湊實現：

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

來源

2016-08-12 05:47:37 rouan

Array.prototype.filter會是一個更好的選擇'[] .filter.call（ele.options，e => e選擇）' – megawac 2016-09-06 18:36:44

ES6

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

哪裏select是將<select>元素的引用。

進行分解：

[...select.options]需要的選項類似數組列表和destructures它，這樣我們就可以使用數組。它的原型方法（編輯：也可以考慮使用Array.from()）
filter(...)減少選項，只有選擇
map(...)原料<option>元素轉換成它們各自的值

來源

2016-09-07 07:28:00

功能性很好的執行:) – roadev 2016-11-22 14:27:49

你可以使用reduce（）方法 [My implementation]（https://stackoverflow.com/a/44574936/4725218） – 2017-06-15 19:00:59

如果你可以參考的子項？ – Evgeny 2017-07-30 01:00:51

我的模板助手模樣的那些這樣的：

'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 
}

來源

2016-11-07 01:38:27

嘿這是什麼樣的語法（'submit #update'）？ – 2017-04-27 04:56:04

防暴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>

來源

2017-03-08 11:38:29

這裏是一個ES6實現：

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

來源

2017-06-15 18:55:28

這很好。有意思的是，因爲'element.options'是一個實時集合，它不能被減少。它必須首先被轉換爲一個數組，如上面的答案所示。 – Brandon 2017-06-15 18:57:39

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

回答

相關問題