Select option to appear when a radio button is selected

  HTML & CSS

Email

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

 
<script>
function ShowHideDiv()
{
var chkYes = document.getElementById("chkYes");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = chkYes.checked ? "block" : "none";
}
</script>

Step2 : Adding Html


<label for="chkYes">
<input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />No
</label>
<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>
</select>
</div>
Spread the Code

Leave a Reply

avatar

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

  Subscribe  
Notify of