[jQuery] Re: Dynamic Form - Best practice

[Kreeves]

I'd like to re-open this discussion as I've had some time to play
around with it and attempted to expand.

I'm essentially wanting the user to first be prompted with a drop down
list of possible search criteria, where they then, for example, may
select "Location" from the first list.  Once they do that, a 2nd drop
down list appears next to it where they can select a particular
building... Then a 3rd list appears containing rooms within that
location.  There's much more that I plan to do with this, but I cannot
get the behavior I want right now.

I've expanded on the example above and this is where I'm at.  Any
assistance would be greatly appreciated!

<textarea style="display:none" id="template"><
div class="main_search-{0}">
<select id="main_search">
  <option value="location">Location</option>
  <option value="other">Other</option>
  <option value="special_rule">Special Rule</option>
</select>
<span id="second_search-{0}"></span>
</div>
</textarea>
<textarea style="display:none" id="building_list">
<div class="building_list">
<select class="building_list">
  <option>Building 1</option>
  <option>Building 2</option>
  <option>Building 3</option>
</select>
</div>
</textarea>
<SPAN id="main_search"></SPAN>

$(document).ready(function(){
  var template = jQuery.format($("#template").val());
  function addRow() {
                $(template(++i)).appendTo("span.#main_search");
        }

  var building_list = jQuery.format($("#building_list").val());
  function buildingDropDown() {
    $(building_list(i)).appendTo("span.#second_search-{" + i + "}");
                alert("span.$second_search-{" + i + "}");
        }

  var i = 0;
        // Initialize main search field
        addRow();

  // Main drop down list has changed... Do something... This does not
operate as I'd like yet
        $("select.#main_search").change(buildingDropDown).change();

  // Add new main search field.. Not in use yet.
  $("#add").click(addRow);
});