JavaScript: Show Hide TextBox on DropDownList (Select) change in HTML

makenzi....

SOLVED CLOSED ACTIVE ANSWERED
User: makenzi.exc
Posted: on Mar 02, 2025 09:54 AM
Forum: JavaScript
Answer: 1
Views: 177

How to show hide TextBox on DropDownList (Select) change in JavaScript.

<span>Do you have Passport?</span>
<select id="ddlConfirm">
    <option value="">Select</option>
    <option value="1">Yes</option>
    <option value="2">No</option>
</select>
<input type="text" />

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on Mar 02, 2025 09:58 AM
Report

Hi makenzi.exc,

Use the JavaScript onchange event handler and check the condition. Based on your condition set the TextBox display attribute.

Refer below example.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
    </style>
</head>
<body>
    <span>Do you have Passport?</span>
    <select id="ddlConfirm" onchange="ShowHideTextBox()">
        <option value="">Select</option>
        <option value="1">Yes</option>
        <option value="2">No</option>
    </select>
    <hr />
    <input id="txtPassportNumber" type="text" style="display:none" />
    <script type="text/javascript">
        function ShowHideTextBox() {
            document.getElementById("txtPassportNumber").style.display = "none";

            // Referencing DropDownList.
            var ddlFruits = document.getElementById('ddlConfirm');

            // Referencing Selected Index.
            var selectedIndex = ddlFruits.selectedIndex;

            if (selectedIndex > 0) {
                // Referencing Selected Option.
                var selectedOption = ddlFruits.options[selectedIndex];

                // Referencing Selected Value.
                var selectedValue = selectedOption.value;

                document.getElementById("txtPassportNumber").style.display = selectedValue == "1" ? "block" : "none";
            }
        };
    </script>
</body>
</html>

Demo

Screenshot

Downloads

Download Sample

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

JavaScript: Show Hide TextBox on DropDownList (Select) change in HTML

Company

Explore

Follow us

Contact Us