コンボボックスの選択に基づいてHTMLレイアウトを変更します

Question

ウェブページを設計しており、ユーザーはxmlファイルを照会できます。基本的には、検索する列と検索の種類を選択し、その値を入力します。しかし、コンボボックスで選択すると、最初のテキスト入力ボックスの後に&というラベルが表示され、別の入力ボックスが表示されます。

現在のコードは以下の通りです：

<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

あなたはdiv要素を非表示にするには、その上にCSSクラスを持つ最初の入力ボックスの後にdiv要素を追加する必要があります。あなたのconfigureTextFields(this, 'querystring')が発砲したときに、選択した項目がその間にあれば、javascriptを使用してcssクラスを削除します。

個人的には、これにjqueryを使用することを検討することをおすすめします。ここに、何か類似のことをしている別のフォーラムのスレッドがあります。

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

あなたがそれをチェックアウトしたいと思うでしょうjQueryを使って、あなたの慣れていない場合、それはあなたの人生がずっと容易になります。 http://jquery.com/