title: Multi-level Select Input
body: <p>I think an example will best illustrate my question. Suppose I have a form to select books and their pages. The user will have one multi-select dropdown to select the books. Then, <em>from each</em> book, the user can select any number of pages. In the end, the data will look like a two-dimensional array. The top level is the array of books chosen, and the second level is the pages selected for each book: </p>
  
  <pre><code>books: {
    "Book 1": ["page1", "page2", "page3"],
    "Book 2": ["page1", "page2"]
  }
  </code></pre>
  
  <p>The dropdown for books will be automatically populated. The options for the dropdown to select the pages for a book will be populated on loading.</p>
  
  <p>Here is a hard coded example just to see the basic layout: <a href="http://codepen.io/alanqthomas/pen/JbVGzW?editors=1000" rel="nofollow noreferrer">http://codepen.io/alanqthomas/pen/JbVGzW?editors=1000</a></p>
  
  <p>I'm doing this in React. I can't figure out a way to set these values in the component's state and display them dynamically. I'm using <a href="https://github.com/JedWatson/react-select" rel="nofollow noreferrer" title="react-select">react-select</a> for the multi-select selection inputs.</p>