title: Ajax approach to populating a second dynamic dropdown based on the selection in the first
body: <p>I've not used much Ajax before, and this seems simple. I have the seperate parts to the puzzle, but not sure how to put them together.</p>
  
  <p>Both dropdowns are populated from the database, the first is populated using the following code:</p>
  
  <pre><code>&lt;?php
  $sql = "SELECT title, nid FROM node where type= 'hotel'";
  $hotels = mysql_query($sql);
  ?&gt;
  &lt;select name="hotels" id="hotels"&gt;
  &lt;?php
  while($row = mysql_fetch_array($hotels))
  {
    echo "&lt;option value=\"".$row['nid']."\"&gt;".$row['title']."\n  ";
  }
  ?&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The second dropdown should be populated based on the value selected above. So basically I want to take the id of the selected item and then use that in a query to populate the second dropdown.</p>
  
  <p>I would use the above code, but with the following for the SQL query:</p>
  
  <pre><code>SELECT title, nid from node where type = 'season' AND hotel_nid = X
  </code></pre>
  
  <p>Where X is the id of the selectedIndex on the first dropdown.</p>
  
  <p>Althought the code is there to work, I don't know how to combine the two. I could use Javascript to modify the InnerHTML of a div called "seasons" by printing the code to retrieve and display the dropdowns.</p>
  
  <p>But is there a better way where I can have both the dropdowns visible, but the second is disabled until the first is completed?</p>