基于组合框选择更改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/