Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Getting selected options with querySelectorAll

Tags:

javascript

html-select

selectors-api

I wonder if it's possible in Javascript to get the currently selected options in a <select multiple> field using the Selctors API rather than a "stupid" iteration over all options.

select.querySelectorAll('option[selected="selected"]') only returns the options that were marked as preselected in the original HTML, which is not what I'm looking for. Any ideas?

like image 574
GOTO 0 Avatar asked Mar 23 '13 12:03

GOTO 0

People also ask

What will querySelectorAll return?

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

Why querySelectorAll not working?

Originally Answered: Why is my querySelectorAll() method not working ? The reason is that you try to access DOM elements before they are part of the DOM. There is no reason to use the querySelector at all unless you have a table already you want to modify.

How do you use queryselectorall in JavaScript?

The JavaScript querySelectorAll method is used to select elements in the document using CSS selectors and returns all the matching elements as a list. The method returns a static NodeList (an array-like object) that contains a list of all elements that match the specified selectors or group of selectors.

What does queryselectorall return?

Definition and Usage. The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.

How to get the value of the selected option element?

We can get the selected option element from the select element with the value property, which has the value of the value attribute of the selected option element. We can also get all the options with the options property. selectedIndex gets the index of the selected option element.

How to get the value of selectedchoice in a select option?

const select = document.querySelector ("select"); const selectedChoice = select.value; console.log (selectedChoice) to get the select element with document.querySelector . Then we get the value of the value attribute of the select option element with the value property. And then we should see that selectedChoice is 2.

1 Answers

document.querySelectorAll('option:checked')

Works even on IE9 ;)

like image 190
a better oliver Avatar answered Oct 08 '22 01:10

a better oliver
Sign in to Comment

Related questions

How can I pass the FormGroup of a parent component to its child component using the current Form API
OnKeyUp JavaScript Time Delay?
JavaScript: Two separate scripts - share variables?
jQuery or Javascript - how to disable window scroll without overflow:hidden;
JSBin: How to get ES6/Babel tab?
Javascript to check whether a checkbox is being checked or unchecked
how do I zoom a background image on a div with background-size
npm install error from the terminal
How can I modify the XMLHttpRequest responsetext received by another function?
How can I scrape pages with dynamic content using node.js?
Understanding the syntax of a deferred execution chain
Advantages of using immutable.js over Object.assign or spread operators
Angular 4: How to read content of text file with HTTPClient
How do I use Mechanize to process JavaScript?
Javascript: sort multidimensional array
How to implement Google doc like text editor? [closed]
Make DIV invisible in CSS and JavaScript
Would this enable "use strict" globally?
Callback function for JSONP with jQuery AJAX
Which browsers support console.log()?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!