Show or Hide TextBox when Selection Changed in JavaScript


In this post on Show or Hide TextBox when Selection Changed in JavaScript, I will demonstrate how to display a textbox or hide it when a specific option is selected in a drop-down list.

Although we use a dropdown list in order to provide the user a number of options in which he or she can select the desired one. However, sometimes the available options are not sufficient. In such a case, it is better to provide one more option that results in displaying an input control that the user can use to enter the desired value.

In other words, the dropdown list works as follows. Whenever the user selects a specific option, a textbox should be displayed. Otherwise, the textbox should not appear. The following example in HTML and JavaScript demonstrates this scenario.

Example for Demonstrating Show or Hide TextBox on a Specific Selection

As can be seen, the following HTML code displays a dropdown list using the <select> tag. Also, a textbox is also there with its CSS property display set to none. Therefore, initially, the textbox is not displayed.

In addition, there is a JavaScript function called f1(), which will be executed when the user selects an option from the list. As soon as, the onchange event handler executes, the variables v and v1 fetch the select element and the textbox respectively with a specific value of id. After that, the function will check whether the selected option has a specific value or not. Accordingly, it will set the display property of the textbox to block or none in order to show or hide textbox respectively.

     <title>Creating TextBox Dynamically</title>
            padding: 20px;
            background-color: #F6F6F0;
            border: solid 3px #F6F6F0;
	    min-height: 500px;
            width: 300px;
	    font-size: 20px;
            font-family: 'comic sans ms';
            font-weight: bolder;
        function f1()
          // document.write('option changed!');
          var v=document.getElementById("s");
          var v1=document.getElementById("myinst");
     <div class="c d">
        <select id="s" name="colleges" class="d" onchange="f1()">
           <option disabled selected>Select your college...</option>
          <option value="m">IITM</option>
          <option value="n">IINTM</option>
          <option value="r">Indraprastha Institute</option>
          <option value="d">ADVT</option>
          <option value="o">Other</option>
        <div id="myinst" style="display:none;margin-left:2px;margin-top:10px;">
           <input type="text" name="inst" class="d">


Show or Hide TextBox
Show or Hide TextBox

Further Reading

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise

Understanding Document Object Model (DOM) in JavaScript

Understanding JSON Web Tokens

Understanding HTTP Requests and Responses

What is Asynchronous JavaScript?

JavaScript Code for Event Handling

Callback Functions in JavaScript

Arrow Functions in JavaScript

JavaScript Code Examples

Show or Hide TextBox when Selection Changed in JavaScript

Changing Style of HTML Elements using getElementsByClassName() Method

Creating Classes in JavaScript


You may also like...