基於組合框選擇更改HTML佈局

Question

我正在設計一個允許用戶查詢xml文件的HTML網頁。基本上，他們選擇他們想要查詢的列，搜索類型，然後鍵入他們的值。但是，如果他們在組合框中進行選擇，那麼在第一個文本輸入框之後，我想要一個&標籤，並出現另一個輸入框。

當前的代碼如下：

<form name="myform" action="podcatalog.xml" method="POST"> 
<select id="ddl" onchange="configureDropDownLists(this,'ddl2')"> 
<option value="author">Author</option> 
<option value="title">Title</option> 
<option value="pages">Pages</option> 
<option value="year">Year</option> 
</select> 

<select id="ddl2" onchange="configureTextFields(this, 'querystring')"> 
</select> 

<input type="text" name="querystring"/> 

<input type="submit" value="Search"/> 

</form> 

<script type="text/javascript"> 
function configureDropDownLists(ddl1,ddl2) { 
    var string = new Array('Contains', 'Equals'); 
    var number = new Array('=', '<', '>', 'Between', '!='); 

    switch (ddl1.value) { 
     case 'author': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < string.length; i++) { 
       createOption(document.getElementById(ddl2), string[i], string[i]); 
      } 
      break; 

     case 'title': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < string.length; i++) { 
       createOption(document.getElementById(ddl2), string[i], string[i]); 
      } 
      break; 

     case 'pages': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < number.length; i++) { 
       createOption(document.getElementById(ddl2), number[i], number[i]); 
      } 
      break; 

     case 'year': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < number.length; i++) { 
       createOption(document.getElementById(ddl2), number[i], number[i]); 
      } 
      break; 

      default: 
       document.getElementById(ddl2).options.length = 0; 
      break; 
    } 

} 

function createOption(ddl, text, value) { 
    var opt = document.createElement('option'); 
    opt.value = value; 
    opt.text = text; 
    ddl.options.add(opt); 
} 

function configureTextFields(ddl2) { 
    switch (ddl2.value) { 
     case 'Between': 

     // Need code here? 

Answer 1

您將需要第一個輸入框後，用CSS類就加一個div隱藏DIV。然後，當你的configureTextFields(this, 'querystring')如果選擇的項目之間發生，然後你會使用JavaScript來刪除CSS類。

就我個人而言，我建議尋找使用jquery這個。這是來自另一個正在做類似事情的論壇的話題。

http://www.webdeveloper.com/forum/showthread.php?t=194923

如果不熟悉，你會想看看jQuery的，它可以讓你的生活輕鬆許多。 http://jquery.com/