如何基于javascript中的下拉选择显示HTML输入

Question

我有一个网页，其中sub-category下拉选项是动态的，这意味着其内容取决于所选的category 。

在sub-category下拉列表中选择“ Colleges时，如何使用javascript显示文本框？

下面是我的代码：

<!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>

Answer 1

将此JavaScript函数添加到页面：

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

更改您的子类别下拉列表，使其具有onchange属性：

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

在页面上的任意位置添加文本框：

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

如何基于javascript中的下拉选择显示HTML输入

问题描述

1 个解决方案

解决方案1
0 2009-10-11 16:44:02

如何基于javascript中的下拉选择显示HTML输入

问题描述

1 个解决方案

解决方案1 0 2009-10-11 16:44:02

解决方案1
0 2009-10-11 16:44:02