如何根據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輸入

回答

相關問題