title: Change HTML layout based on combo box selection
body: <p>I am designing a <code>HTML</code> web page which allows the user to query an <code>xml</code> file. Basically, they choose the column they would like to query, the search type and then type in their value. However, if they choose between in the combo box, then after the first text input box, I would like an &amp; label, and another input box to appear.</p>
  
  <p>The current code is below:</p>
  
  <pre><code>&lt;form name="myform" action="podcatalog.xml" method="POST"&gt;
  &lt;select id="ddl" onchange="configureDropDownLists(this,'ddl2')"&gt;
  &lt;option value="author"&gt;Author&lt;/option&gt;
  &lt;option value="title"&gt;Title&lt;/option&gt;
  &lt;option value="pages"&gt;Pages&lt;/option&gt;
  &lt;option value="year"&gt;Year&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="ddl2" onchange="configureTextFields(this, 'querystring')"&gt;
  &lt;/select&gt;
  
  &lt;input type="text" name="querystring"/&gt;
  
  &lt;input type="submit" value="Search"/&gt;
  
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  function configureDropDownLists(ddl1,ddl2) {
      var string = new Array('Contains', 'Equals');
      var number = new Array('=', '&lt;', '&gt;', 'Between', '!=' );
  
      switch (ddl1.value) {
          case 'author':
              document.getElementById(ddl2).options.length = 0;
              for (i = 0; i &lt; string.length; i++) {
                  createOption(document.getElementById(ddl2), string[i], string[i]);
              }
              break;
  
          case 'title':
              document.getElementById(ddl2).options.length = 0;
              for (i = 0; i &lt; string.length; i++) {
                  createOption(document.getElementById(ddl2), string[i], string[i]);
              }
              break;
  
          case 'pages':
              document.getElementById(ddl2).options.length = 0;
              for (i = 0; i &lt; number.length; i++) {
                  createOption(document.getElementById(ddl2), number[i], number[i]);
              }
              break;
  
          case 'year':
              document.getElementById(ddl2).options.length = 0;
              for (i = 0; i &lt; 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?
  </code></pre>
  
  <p></p>