How to display an HTML input based on a dropdown selection in javascript

Question

I have a webpage where the sub-category dropdown options are dynamic, which means that it's contents depend on the selected category.

How can I display a textbox when Colleges is selected in the sub-category dropdown, with javascript?

Below is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
      function dropdownlist(listindex) {
        document.formname.subcategory.options.length = 0;
        switch (listindex) {
          case "Home Ware" :
            document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
            document.formname.subcategory.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
            document.formname.subcategory.options[2]=new Option("Audio/Video","Audio/Video");
            document.formname.subcategory.options[3]=new Option("Beddings","Beddings");
            document.formname.subcategory.options[4]=new Option("Camera","Camera");
            document.formname.subcategory.options[5]=new Option("Cell Phones","Cell Phones");
            break;
          case "Education" :
            document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
            document.formname.subcategory.options[1]=new Option("Colleges","Colleges");
            document.formname.subcategory.options[2]=new Option("Institutes","Institutes");
            document.formname.subcategory.options[3]=new Option("Schools","Schools");
            document.formname.subcategory.options[4]=new Option("Tuitions","Tuitions");
            document.formname.subcategory.options[5]=new Option("Universities","Universities");
            break;
          case "Books" :
            document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
            document.formname.subcategory.options[1]=new Option("College Books","College Books");
            document.formname.subcategory.options[2]=new Option("Engineering","Engineering");
            document.formname.subcategory.options[3]=new Option("Magazines","Magazines");
            document.formname.subcategory.options[4]=new Option("Medicine","Medicine");
            document.formname.subcategory.options[5]=new Option("References","References");
            break;
        }
      return true;
    }
  </script>
</head>

<title>Dynamic Drop Down List</title>

<body>    
  <form id="formname" name="formname" method="post" action="submitform.asp" >
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td width="41%" align="right" valign="middle">Category :</td>
        <td width="59%" align="left" valign="middle">
          <select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
            <option value="">Select Category</option>
            <option value="Home Ware">Home Ware</option>
            <option value="Education">Education</option>
            <option value="Books">Books</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right" valign="middle">
          Sub Category :
        </td>
        <td align="left" valign="middle">
          <script type="text/javascript" language="JavaScript">
            document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
          </script>
          <noscript>
            <select name="subcategory" id="subcategory" >
              <option value="">Select Sub-Category</option>
            </select>
          </noscript>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

Ok, this is begging for refactoring...

kangax
– kangax

2009-10-11 18:09:18 +00:00
Commented Oct 11, 2009 at 18:09 — kangax
– kangax, Commented Oct 11, 2009 at 18:09

James Skidmore · Accepted Answer · 2009-10-11 16:44:02Z

1

Add this JavaScript function to the page:

function changeSubcat(val)
{
  var theTextbox = document.getElementById('theTextbox');
  if (val == 'Colleges')
  {
    theTextbox.style.display = 'block';
  } else {
    theTextbox.style.display = 'none';
  }
}

Change your subcategory drop-down to have the onchange attribute:

<select name="subcategory" onchange="javascript: changeSubcat(this.options[this.selectedIndex].value);">

Add your text box anywhere on the page:

<textarea style="display: none;" id="theTextbox"></textarea>

answered Oct 11, 2009 at 16:44

James Skidmore

50.4k33 gold badges112 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Skidmore Over a year ago

It's not completely necessary, but I've done that ever since probably 5-6 years ago when I think there may have been some cross-browser issues without it. I guess it's just a habit.

kangax Over a year ago

I would say it's completely unnecessary ;) All browsers I know of interpret attribute value as a function body for an event handler. Prepending this value with "javascript:" merely creates an extraneous and rather useless label in event handler function. Are you, perhaps, thinking of "href" attribute and a popular anti-pattern of prepending its value with "javascript" pseudo protocol?

Collectives™ on Stack Overflow

How to display an HTML input based on a dropdown selection in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related