title: How to represent form options that depend on other forms
body: <p>I have a form that is suposed to help to user to choose a specific thing at the end, but as the user fills the first options, the others below change. Something like this:</p>
  
  <pre><code>Type:
  {
      t1:{
          Number of X:{
              1:{...}
              2:{...}
          }
          Number of Y:{...}
      }
      t2:{
          Number of X:{
              100:{...}
              200:{...}
          }
          Number of Y:{...}
      }
  }
  </code></pre>
  
  <p>The user has the field Type with the options t1 and t2, when they choose t1, the field "Number of X" will be filled with 1 and 2, if they choose t2, the field "Number of X" will be filled with 100 and 200, and so on. Some of the choices depend on more than one field, its not straight down dependency (something like, if the user chooses "Number of X" = 100 then Foo is "A", else, Foo can be "A", "B" or "C", but Foo is not bellow "Number of X").</p>
  
  <p>I tried a really naive implementation where I would set up event listeners on every field and see their changes, but eventually the code started growing out of control and I have a bunch of <code>$("#foo").change(function(){...});</code> and its not imediatly obvious that the field listening to this is <code>bar</code> and not <code>fbar</code>.</p>
  
  <p>I also tried JSON (as the example above), but there's a lot of repetition, the deeper the tree grows and the number of possibilites increase, I have to write the same fields again and again. Sometimes choosing <code>t1</code> will change an option directly even though its not directly bellow it, and even though it usually depends on another field entirely, and that's more repetition in JSON.</p>
  
  <p>How do I approach this problem? Is there a readable solution? Too much code is not the problem, as long as one can look at the code and understand the dependencies and their effects.</p>
  
  <p>A code example (kinda like my code right now):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="type"&gt;
  &lt;option value=1&gt;a&lt;/option&gt;
  &lt;option value=2&gt;b&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="numOfX"&gt;
  &lt;/select&gt;
  &lt;select id="numOfY"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$("#type").change(function()
  {
      if($("#type").val() == 1)
      {
          $("#numOfX").append(new Option(1, "1", false, false));
          $("#numOfX").append(new Option(2, "2", false, false));
      }
      else if($("#type").val() == 2)
      {
          $("#numOfX").append(new Option(1, "100", false, false));
          $("#numOfX").append(new Option(2, "200", false, false));
      }
  });
  
  $("#numOfX").change(function()
  {
      ...
  });
  </code></pre>