Fetching the selected options html from select box

Question

I have an select dropdown. I want to fetch the html of the selected option

<select id="filter" multiple="multiple">
     <option>Yes</option>
     <option>No</option>
</select>

For example if I select Yes and No I want the output as

<option>Yes</option>
<option>No</option>

If you use it in a form, give the select tag a name attribute. With JS you can use select.selectedIndex — Ibu, Sep 26 '18 at 07:06
Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Ibu, Sep 26 '18 at 07:12

score 1 · Answer 1 · answered Sep 26 '18 at 07:30

function fun(e){
var concat='';
for(var i = 0; i<e.children.length; i++)
{
 var str = e.children[i].outerHTML
 concat +=str;
}
console.log(concat);
}

<html>
<head>
 <title>JavaScript Popup Example 3</title>
</head>
<body>
<select id="filter" multiple="multiple" onChange='fun(this)'>
     <option>Yes</option>
     <option>No</option>
</select>
</body>
</html>

score 1 · Accepted Answer · answered Sep 26 '18 at 07:34

1

It can be done with ECMAScript very easily.

let select = document.getElementById('filter');

select.addEventListener('change', event => {
  let checkedOption = [...event.target.children].find(c => c.selected);
  console.log(checkedOption.outerHTML);
});

<select id="filter" multiple="multiple">
     <option>Yes</option>
     <option>No</option>
</select>

answered Sep 26 '18 at 07:34

vrintle

5,501
2
16
46

thanks for the help I have tried lot of options but didn;t succeed. Your answer saved me. – daemon Sep 26 '18 at 17:30
Hi @daemon if this or any answer has solved your question please consider [accepting it](https://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this – vrintle Oct 04 '18 at 15:02

connexo · Answer 3 · 2018-09-26T07:23:00.423

If you want the output in the console, here you go. No jQuery necessary.

filter.addEventListener('change', function() {
  console.log([...this.querySelectorAll(':checked')]);
  // even simpler but not available in IE 11:
  console.log([...filter.selectedOptions]);
})

<select id="filter" multiple="multiple">
  <option>Yes</option>
  <option>No</option>
</select>

If what you want is the values from those items which are selected, simply ask the :checked elements for their textContent:

filter.addEventListener('change', ()=>{
  console.log([...filter.querySelectorAll(':checked')].map(i=>i.textContent));
})

<select id="filter" multiple="multiple">
  <option>Yes</option>
  <option>No</option>
</select>

Kumar · Answer 4 · 2018-09-26T07:17:50.503

You can do it using jQuery like this.

$("#filter").on('change', function(){
  // the next line will find all the options which are selected
  options = $(this).find('option:selected');
  
  // loop through all the selected options and print them to console
  for(var i = 0; i < options.length; i++){
    option = options[i];
    console.log(option.outerHTML);
  }

});

select{
width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="filter" multiple="multiple">
     <option>Yes</option>
     <option>No</option>
</select>

score 0 · Answer 5 · answered Sep 26 '18 at 07:20

There was a similar question in Getting the selected values in a multiselect tag in Javascript

You can find selected OPTION elements by using element.selected command. In short, the function for finding these HTML elements would be something like this:

var list = document.getElementById("filter");
var button = document.getElementById("button");

button.addEventListener("click", function(e){
    for(var i=0; i<list.length; i++){
    if(list.options[i].selected) {
        console.log(list.options[i]);
    };
  };
});

https://jsfiddle.net/bgz2cr9w/

score 0 · Answer 6 · edited Sep 26 '18 at 08:44

0

Using jquery you can get your desired output.


$(document).on('change', '#filter', function(){
    $.each($(this).find('option:selected'), function(i,d){
        console.log(d);
    })
});

edited Sep 26 '18 at 08:44

Matthias

4,481
12
45
84

answered Sep 26 '18 at 07:43

Chayan

604
5
12

Fetching the selected options html from select box

6 Answers6