Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find all selected options of HTML select tag?
Overview
To get the selected options from a dropbox we will be using the JavaScript library that is Jquery. The Jquery provides the feature to select and find the options in the optimum lines of code. For this we will be using pseudo selector class ":selected" for the single selection and multiple selection. So for this in the single selection we will directly alert the user and in multiple we will be storing the Output in the array then displaying it on the screen.
Syntax
The Syntax used in this feature is −
$("option:selected").text();
option:selected − The option:selected in the above Syntax is termed as pseudo class selector which selects the selected options from the dropdown or from the form.
text() − It is the Jquery method which returns the text value from the selected text.
Algorithm 1
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to it.
Step 2 − Now add the Jquery CDN Link to the head tag of the page.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
Step 3 − Now create a dropdown using the HTML select options tag.
<select> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> <option value="option5">option5</option> </select>
Step 4 − Add the button with the "Check Now" value.
<button>Check Now</button>
Step 5 − Now add the script tag inside the body tag to write the Jquery code in it.
<script></script>
Step 6 − Use the Jquery selector to select the selected text using the pseudo class.
$("button").click(() => {
var o = $("option:selected").text();
alert(o)
})
Step 7 − As the user will click it will return the option.
Example 1
To find the selected options from the dropdown we will be using the Jquery in this Example. The CSS selector has the pseudo class selector which will select on the elements that are selected by the user.
<html>
<head>
<title>find all selected options</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
</head>
<body>
<h3>Choose the option from dropbox</h3>
<select>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<button>Check Now</button>
<script>
$(document).ready(() => {
$("button").click(() => {
var o = $("option:selected").text();
alert(o)
})
})
</script>
</body>
</html>
The given below image shows the Output window of the user's screen in which it contains a dropdown box with five options as "option1", "option2", "option3", "option4" and "option5". So when a user clicks on any of the options, internally the selected attribute is added to that element. So the pseudo class selects the particular element and pop up on the user browser window.
Algorithm 2
Step 1 − Create a HTML file on your text editor such as VS Code or Sublime text editor and add a HTML boilerplate to it.
Step 2 − Now add the Jquery CDN Link to the head tag of the page.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
Step 3 − Now create a dropdown using the HTML <select>, <option> tag and add an attribute multiple to the select tag.
<select multiple> <option>Pizza</option> <option>Burger</option> <option>French Fries</option> <option>Dosa</option> <option>Samosa</option> </select>
Step 4 − Add the button with "Buy Now" value.
<button>Buy Now</button>
Step 5 − Now add the script tag inside the body tag to write the Jquery code in it.
<script></script>
Step 6 − Now create a variable with an empty array.
var o = [];
Step 7 − Use the Jquery selector to select the selected text using the pseudo class and push the selected text to the array.
$("button").click(() => {
o.push($("option:selected").text());
$(".answer").html(o);
})
Step 8 − On clicking the buy now button the selected option will be displayed.
Example 2
For finding the selected option in the multiple choice option in the dropdown, we will be creating an array for that as the user selects the options it will be pushed in an array and displayed on the user screen. So for this we have used the food ordering Example.
<html>
<head>
<title> find all selected options </title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
</head>
<body>
<h3>Select multiple option from dropbox</h3>
<button>Buy Now</button>
<div style="margin: 0.5rem 0;">
<select multiple>
<option>Pizza</option>
<option>Burger</option>
<option>French Fries</option>
<option>Dosa</option>
<option>Samosa</option>
</select>
</div>
<div class="answer"></div>
<script>
$(document).ready(() => {
var o = [];
$("button").click(() => {
o.push($("option:selected").text());
$(".answer").html(o);
})
})
</script>
</body>
</html>
The below image shows the Output of the above program, in which when the user loads the page in the browser it displays a multiple dropdown for selection in which a user can select multiple foods from the list. As the user clicks on the buy now button the food selected by the user will be displayed on the users screen.
Conclusion
So from this we can conclude that this type of feature can be used in the food ordering web application or in such a type of application in which a user wants to select an option and on the basis of the selection option further process or function will be performed. For selecting multiple options a multiple attribute is must to use with the select tag.
127 Views
To Continue Learning Please Login