Monday, 29 January 2018

Show Hide DIV with TextBox based on DropDownList Selected Value (Selection) using JavaScript



Code for - Show Hide DIV with TextBox based on DropDownList Selected Value using JavaScript.

 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
30
31
32
33
34
35
36
37
38
<html>
<head>
 <script type="text/javascript">
    function ShowHideDiv() {
  var ddlGender = document.getElementById("ddlGender");
  var dvFemale = document.getElementById("dvFemale");
  dvFemale.style.display = ddlGender.value == "F" ? "block" : "none";
  
  var dvMale = document.getElementById("dvMale");
  dvMale.style.display = ddlGender.value == "M" ? "block" : "none";
    }
 </script>
</head>
<body>
 <table>
  <tr>
   <td>
    <span>Gender</span>
    <select id = "ddlGender" onchange = "ShowHideDiv()">
     <option value="select">--Select--</option>
     <option value="M">Male</option>
     <option value="F">Female</option>
    </select>
   </td>
   <td>
   <div id="dvFemale" style="display: none">
    <input type="radio" name="gender" value="single"> Single
    <input type="radio" name="gender" value="married"> Married
    <input type="radio" name="gender" value="divorced"> Divorced
   </div>
   <div id="dvMale" style="display: none">
    <input type="radio" name="gender" value="single"> Single
    <input type="radio" name="gender" value="married"> Married
   </div>
   </td>
  </tr>
 </table>
</html>

       For Output Save this code as an HTML file.
       Select any value from the Drop-Down List.
     




at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Total Pageviews