How to get selected value in dropdown list using JavaScript

In this article, we discussed How to get selected value in the dropdown list using JavaScript

How to get selected value in the dropdown list using JavaScript

How to get selected value in dropdown list using JavaScript
How to get selected value in dropdown list using JavaScript

How to get selected value in dropdown list using JavaScript

Method 1:

Using the value property:

The value of the selected element can be found by using the value property on the select element that defines the list. This property returns a String representing the value attribute of the <option> element in the list. If no option is selected then nothing will be returned.

Syntax:

selectElement.value

How to get selected value in dropdown list using JavaScript

HTML

<!DOCTYPE html>
<head>
    <title>
        How to get selected value in dropdown
        list using JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        Example 
    </h1>
      
    <b>
        How to get selected value in dropdown
        list using JavaScript?
    </b>
      
    <p>
        Select one from the given options:
        <select id="select1">
            <option value="free">Free</option>
            <option value="basic">Basic</option>
            <option value="premium">Premium</option>
        </select>
    </p>
      
    <p>
        The value of the option selected is:
        <span class="output" style="font-size:30px; color:red;"></span>
    </p>
      
    <button onclick="getOption()">
        Check option
    </button>   
</body>
  
</html> 

Javascript

 <script type="text/javascript">
        function getOption() {
            selectElement = 
                    document.querySelector('#select1');
                      
            output = selectElement.value;
  
            document.querySelector('.output').textContent
                    = output;
        }
 </script>

output

Before clicking the button:

How to get selected value in dropdown list using JavaScript
How to get selected value in dropdown list using JavaScript

After clicking the button:

How to get selected value in dropdown list using JavaScript
How to get selected value in dropdown list using JavaScript

Method 2:

Using selectedIndex property with the option property:

The selectedIndex property returns the index of the currently selected element in the dropdown list. This index starts from 0 and returns -1 if no option is selected.
The options property returns the collection of all the option elements in the <select> dropdown list. The elements are sorted according to the source code of the page. The index found before it can be used with this property to get the selected element. This option’s value can be found by using the value property.

Syntax:

selectElement.options[selectElement.selectedIndex].value

HTML

<!DOCTYPE html>
<head>
	<title>
		How to get selected value in
		dropdown list using JavaScript?
	</title>
</head>

<body>
	<h1 style="color: green">
		GeeksForGeeks
	</h1>
	
	<b>
		How to get selected value in
		dropdown list using JavaScript?
	</b>
	
	<p>
		Select one from the given options:
		<select id="select1">
			<option value="free">Free</option>
			<option value="basic">Basic</option>
			<option value="premium">Premium</option>
		</select>
	</p>
	
	<p>
		The value of the option selected is:
		<span class="output" style="font-size:30px; color:red;"></span>
	</p>
	
	<button onclick="getOption()">
		Check option
	</button>
	
	
</body>

</html>	

Javascript

<script type="text/javascript">s
		function getOption() {
			selectElement = document.querySelector('#select1');
					
			output =
			selectElement.options[selectElement.selectedIndex].value;

			document.querySelector('.output').textContent = output;
		}
	</script>

output

Before clicking the button:

How to get selected value in dropdown list using JavaScript
How to get selected value in dropdown list using JavaScript

After clicking the button:

How to get selected value in dropdown list using JavaScript
How to get selected value in dropdown list using JavaScript

JavaScript is best known for web page development but it is also used in a variety of non-browser environments.

More Info Javascript

Javascript, Web development, UI Development, Jquery, Select Dropdown, Get selected value in dropdown list using JavaScript, HTML DOM Select value Property, How to Get the Value of a Select or Dropdown List, How to get SELECT dropdown list Selected value, Get selected value of dropdown in javascript on button click, How to get all dropdown values in JavaScript

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Protect yourself from CovidVaccination saves lives at every stage of life
  • Clean your home regularly, particularly frequently touched surfaces like
  • Stay home stay safe. Follow the Golden Rule. Wash your hands frequently with soap and water or use alchohol based hand-rub.
  • Stay home stay safe. Stay physically fit. Exercise regulary. Eat a nutritious diet. Don’t smoke.
  • Stay home stay safe. If you show symptoms of COVID-19, self isolate yourself, wear a mask around others and seek medical advice