Select option to appear when a radio button is selected



The above example shows typical <select> usage. It is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <option> element nested inside the <select>.


step1: Adding JavaScript

function ShowHideDiv()
var chkYes = document.getElementById("chkYes");
var dvtext = document.getElementById("dvtext"); = chkYes.checked ? "block" : "none";

Step2 : Adding Html

<label for="chkYes">
<input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />Yes
<label for="chkNo">
<input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />No
<div id="dvtext" style="display: none">
<select id="txtBox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
Spread the Code

Leave a Reply


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Notify of