How to Display the selected value of the drop-down list

If you don’t know how to display selected value of dropdownlist in HTML, then this article is for you. In this article, I will show 3 simple methods to display user selected values in the dropdown list.

What is dropdown list?

By default all the options are hidden in the drop-down list, when we click the down-arrow button, all the options are shown. If you want to give a lot of options in a form then you can use a dropdown list in HTML. Many options can be given in the dropdown list but users can select only one option. For example, if you are creating a dropdown list to choose the country in the form then the user can select only one country.

If we use the input radio button instead of the drop-down list, all the options will be shown by default in the radio button, so it will be difficult for users to see all the options and select them. But using this, we can save a lot of space and makes it easier for users to select an option. We can also create a menubar using a drop-down list. When you create a menubar you can link pages using the <a> tag for each option.

How to create a simple Drop-down list?

<select id="language" >
<option value="English">English</option>
<option value="Spanish">Spanish</option>
<option value="French">French</option> </select>

The following output is:

1. First, we need to use the <select> tag to create the drop-down list. <select> tag is a paired tag, so we need to give it an opening and closing tag. If you create a <select> tag, a drop-down button will be created, but if you click on it, no options will be shown because we haven’t given the options yet.
2. You should use the <option> tag to provide options when the dropdown button is clicked. Options should always be given inside the <select> tag using the <option> tag, then when we click the dropdown button all the options will be displayed. Each option should be given in a separate <option> tag only, then the options will be displayed separately, so you should not give all the options in one <option> tag.

In the above code, I have created a dropdownlist to select the language. I have given language options using <option> tag inside <select> tag. I have given each language option in a separate <option> tag only, then the option is displayed separately. So you should create a drop-down list in this way. And we need to write a JS function to detect which option the user selects, let’s see how to write it

3 Method to display the selected value of dropdownlist in HTML

Method 1

Code:

<form name="formid">
<select name="ddlselect" onchange="myFunction()">
<option value="United States Of America">USA</option>
<option value="Canada">Canada</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option> </select>
</form>
<label id="country"></label>
<script>
function myFunction() {
document.getElementById('country').innerHTML=
("The Selected Dropdown Value is :<b style='color:red;'>" +
 formid.ddlselect[formid.ddlselect.selectedIndex].text+'</b>') }
</script>

Live Preview:

See the Pen
Country dropdown by Wonderdevelop (@wonderdevelop)
on CodePen.

Steps:

1. In this method, we need to create the drop0down list inside the <form> tag.
2. Add name attribute separately to form tag and select tag and give value to it. And add “onchange” attribute to the <select> tag and give “myFunction()” as a value.
3. In HTML lastly, you need to create a <label> tag and add an ID attribute and value it.
4. See the above Javascript myFuction(), and change the function according to your ID name. Since the submit button is not set in this method, the selected value is displayed automatically after the selected option.

Method 2

Code:

<select id="Country" >
<option value="United States Of America">USA</option>
<option value="Canada">Canada</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option> </select>
<input type="submit" onclick="myFunction() ">
<p id="x"></p>
<script>
function myFunction() {
var x = document.getElementById("Country").value;
document.getElementById("x").innerHTML = x; }
</script>

Steps:

1. In this method, we can find the user value using the id in the <select> tag. First, add an ID attribute in the <select> tag and give it a name.
2. After the user selects the option, we need to create the input submit button to submit. And add “onclick” attribute and give value as “myFuction()“.
3. Write javascript function() to display value after clicking submit button. In the above code, I have named the JSfuction as “myFuction()”.
4. To find the user value in myFuction() you should use this syntax: document.getElementById(“IDname “).value, Here, you need to change your <select> tag ID name in the bracket. We have stored this value in variable x.
5. To display that value in HTML, we need to use the JSHTML DOM Element innerHTML method and use the “x” variable as in the above code. And you need to create a <p> tag and add the ID attribute and give the id name “x”.

Method 3

Code:

<select>
<option value="United States Of America">USA</option>
<option value="Canada">Canada</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option> </select>
<h2 style="display: inline; padding-left: 10px;">Result</h2>
<script>
let selection = document.querySelector('select');
let result = document.querySelector('h2');
selection.addEventListener('change', () => {
result.innerText = selection.options[selection.selectedIndex].value;
console.log(selection.selectedIndex);
})  </script>

Steps:

1. In this method, we don’t need to add any attribute in the <select> tag. Add an H2 element at the end of the HTML and give it some text like “End” as in the code above. You must give the h2 element this way because the H2 element will be changed to the user-given value.
2. Just give the HTML exactly as I said and paste the JSfunctioncode above. Your selected (option) value will be displayed successfully. Since the submit button is not set in this method, the selected value is displayed automatically after the selected option.

Conclusion

I hope you will learn 3 simple ways to display the value of your drop-down list through this article.