如何根据javascript中的下拉选项显示HTML输入

我有一个网页，其中sub-category下拉选项是动态的，这意味着它的内容取决于所选的category。如何根据javascript中的下拉选项显示HTML输入

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

下面是我的代码：

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

来源

2009-10-11 noob

好吧，这是乞求重构... – kangax 2009-10-11 18:09:18

这个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>

来源

2009-10-11 16:44:02

在属性中的“javascript：”有什么意义？ – kangax 2009-10-11 18:30:38

这不是完全必要的，但是我从大概5-6年前就已经这样做了，因为我认为如果没有它，可能会出现一些跨浏览器的问题。我想这只是一种习惯。 – 2009-10-11 18:36:35

我会说这完全没有必要;）我知道的所有浏览器都将属性值解释为事件处理函数的函数体。在“javascript：”前加上这个值只会在事件处理函数中创建一个无关紧要而无用的标签。您是否也许正在考虑“href”属性以及一种通过“javascript”伪协议预先赋值的流行反模式？ – kangax 2009-10-12 04:44:09

如何根据javascript中的下拉选项显示HTML输入

回答

相关问题