Làm thế nào để lấy tất cả các giá trị đã chọn của một hộp nhiều lựa chọn?

Question 1

Tôi có một <select>phần tử với multiplethuộc tính. Làm cách nào để lấy các giá trị đã chọn của phần tử này bằng JavaScript?

Đây là những gì tôi đang thử:

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

Question 2

Không có 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;
}

Ví dụ nhanh:

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

Question 3

ES6

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

Trong trường hợp selectlà một tham chiếu đến <select>phần tử.

Để phá vỡ nó:

[...select.options]lấy danh sách các tùy chọn giống như Array và hủy nó để chúng ta có thể sử dụng các phương thức Array.prototype trên đó (Chỉnh sửa: cũng xem xét sử dụng Array.from())
filter(...) giảm các tùy chọn xuống chỉ những tùy chọn được chọn
map(...)chuyển đổi các <option>phần tử thô thành các giá trị tương ứng của chúng

Question 4

Kiểm tra:

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

NHẤN VÀO ĐÂY ĐỂ XEM DEMO

Question 5

Khá giống với những gì đã được đề xuất nhưng hơi khác một chút. Về nhiều mã như jQuery trong Vanilla JS :

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

Nó có vẻ nhanh hơn hơn một vòng lặp trong IE, FF và Safari. Tôi thấy thú vị là nó chậm hơn trong Chrome và Opera.

Một cách tiếp cận khác sẽ là sử dụng các bộ chọn:

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

Question 6

giả sử multiSelect là Multiple-Select-Element, chỉ cần sử dụng Thuộc tính đã chọn của nó:

//show all selected options in the console:

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

Question 7

Đây là một triển khai ES6 :

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

Question 8

Kiểm tra điều này:

HTML:

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

Mã một dòng Javascript

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

Question 9

Bạn có thể thử tập lệnh này

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

Question 10

Bạn có thể sử dụng [].reduceđể triển khai nhỏ gọn hơn phương pháp của RobG :

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

Question 11

Xây dựng trên Rick Viscomi câu trả lời 's, hãy thử sử dụng HTML Chọn phần tử của selectedOptions bất động sản:

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

Chi tiết,

selectedOptions trả về danh sách các mục đã chọn.
Cụ thể, nó trả về một HTMLCollection chỉ đọc chứa HTMLOptionElements .
...là cú pháp lây lan . Nó mở rộng các HTMLCollectionphần tử của.
[...]tạo một Arrayđối tượng có thể thay đổi từ các phần tử này, cung cấp cho bạn một mảng HTMLOptionElements.
map()thay thế mỗi HTMLObjectElementtrong mảng (ở đây được gọi là option) bằng giá trị của nó ( option.value).

Dày đặc, nhưng nó có vẻ hoạt động.

Xem ra, selectedOptions không được hỗ trợ bởi IE!

Question 12

Giống như câu trả lời trước đó nhưng sử dụng underscore.js.

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

Question 13

Trình trợ giúp mẫu của tôi trông như thế này:

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

Question 14

Đây rồi.

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)

Question 15

Mã Riot 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>

Question 16

Bạn có thể sử dụng plugin jquery đã chọn.

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