How To Display Selected Value Of Dropdownlist In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to display selected value of dropdownlist in HTML, here we created dropdown using style properties and dropdown list created with input tag button type, onclick event.
The event will helps to initialize function calls then we can easily retrieve selected value from dropdown list using javascript. Let see below with step by step guidance.
Step By Step Guide On How To Display Selected Value Of Dropdownlist In HTML :-
Here we defined <h4> tag for instruct users, two div tags defined for create dropdown list.
In first div ‘select’ we created select label and second div ‘dd’ we used to create dropdown list with three values then last div ‘res’ used to append selected value from dropdown list by user.
In script we defined code for toggle dropdown list and retrieve user selected value from list and appends to webpage.
<!DOCTYPE html>
<html>
<head>
<title>Display Selected Option</title>
<style>
#dd{
position: relative;
box-shadow: 2px 2px 4px #000;
width: 20%;
height: 80%;
}
input{
position: absolute;
width: 100%;
background-color: transparent;
border-bottom: 1px solid #ccc;
border-left: 0;
border-right: 0;
border-top: 0;
}
#dd{visibility: hidden;}
.select:hover{
box-shadow: inset 2px 2px 1px #555;
}
.select{border: 1px solid #ccc;
width: fit-content;
padding: 10px 1rem;}
</style>
</head>
<body>
<h4>Click on Select color for show dropdown list</h4>
<div class="select">Select Color :</div>
<div id="dd">
<input type="button" value="Red" onclick="fun1()"><br>
<input type="button" value="Rose" onclick="fun2()"><br>
<input type="button" value="Green" onclick="fun3()"><br>
</div><br><br>
<div id="res"></div>
<script>
document.querySelector('.select').addEventListener('click',()=>{
document.getElementById('dd').style.visibility="visible";
});
function fun1(){
document.getElementById('res').innerHTML='Red';
}
function fun2(){
document.getElementById('res').innerHTML='Rose';
}
function fun3(){
document.getElementById('res').innerHTML='Green';
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- In style tag we defined some block of style properties for style dropdown list. The ‘#dd’ refers id of second div tag using that we styled dropdown list box by ‘position:relative, box-shadow: 2px 2px 4px #000; width: 20%; height: 80%;’.
- The input refers all defined input tag in html page and styled by ‘position:absolute,width set to 100%, background set to transparent color, only bottom border set to 1px width, solid style and remaining side border set to 0’.
- Initially we sets ‘dd’ div block of list visibility to hidden and when we hover select label we sets to inset box shadow. Select label styled by border around label, width to fit content otherwise it will sets to page size, padding top and bottom to ‘10px’ and left and right set to ‘1rem’.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined h4 tag for instruct users, div with class ‘select’ create ‘select color’ label and div with ‘id’ attribute for define dropdown list. Within ‘dd’ div we defined three input tags button type.
- For identify user selected option we defined value, onclick attributes, so when user click on any option event will initialize respective functions ‘fun1.fun2,fun3’.
- Lastly we defined div ‘res’ used to append result of selected option.
- In script we defined ‘document.querySelector('.select').addEventListener('click',()=>’ line refers when user clicks select label it will called then makes ‘dd’ div to visible to users.
- When user clicks on any option from list respective functions will called there we appended respective value ‘Red or Rose or Green’ by innerHTML.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to display selected value from dropdown list in html.
When we executes our program on browser we can see one head line and label select color then when user clicks on select color label dropdown list will toggle.
User can select any option the list when user select any one option that result will appear at bottom of webpage incase user select some other option result also get changed.
We can also create dropdown list with some other values using this concept.
I hope this tutorial on how to display selected value of dropdownlist in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
