Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Javascript onchange Event Tutorial to Get Dropdown Value of Select Input Field | Handle Forms in JS

Posted on February 12, 2023

 

 

Welcome folks today in this blog post we will be looking on how to get dropdown value of select input field using the onchange event in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="teams">Select your team:</label>
    <select id="team" onchange="selectTeam()">
        <option value="India">India</option>
        <option value="Australia">Australia</option>
        <option value="England">England</option>
        <option value="New Zealand" selected>New Zealand</option>
        <option value="South Africa">South Africa</option>
    </select>
    <div id="info">
 
    </div>
</body>
<script>
selectTeam()
function selectTeam(){
    let team = document.getElementById('team').value
    document.getElementById('info').innerHTML = `You have selected ${team} team`
}
</script>
</html>

 

 

As you can see we have added the html code where we have the select tag to select the cricket teams. Inside it we have given the id to the select tag so that we can target it’s value inside javascript. And also we have binded onchange event listener where we are attaching the selectTeam() method.

 

And inside this method we are getting the value of the selected team from the dropdown and then we are showing it inside the div tag having the info id attached to it.

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme