title: Populate second dropdown based on the value selected in the first dropdown in flask using ajax and jQuery
body: <p>I am not getting anywhere on this. Any help regarding this would be greatly appreciated!</p>
  
  <p>I have two dropdowns for Managers and Employees.</p>
  
  <p>Managers dropdown contains a list of Managers by default.</p>
  
  <p>I want to populate Employees dropdown with the employees name by querying a SQL Server database with the Manager name a user selects in Managers dropdown.</p>
  
  <p>So for e.g. if a person selects Tom as the Manager in the Managers dropdown then the Employees dropdown should populate with the Employees name where Manager = Tom. </p>
  
  <p>So far I have the following code:</p>
  
  <p>Route (which I am using to query SQL Server database to get employees list based on a manager name):</p>
  
  <pre><code>@app.route ('/getEmployees', methods=['GET'])
  def getEmployees():
      engine = create_engine('mssql+pyodbc://&lt;server name&gt;/&lt;DB name&gt;?driver=SQL+Server+Native+Client+11.0')
      Base = declarative_base(engine)
  
      class Bookmarks(Base):
          __tablename__ = '&lt;table name&gt;'
          Employee = Column(String(50))
          __table_args__ = {'autoload': True}
  
          def __repr__(self):
              return '{} '.format(self.Employee)
  
      def loadSession():
          metadata = Base.metadata
          Session = sessionmaker(bind=engine)
          session = Session()
          return session
      if __name__ == "__main__":
          session = loadSession()
          return session.query(Bookmarks).filter_by(Manager='&lt;I want to populate this with the manager name a user selects in the Manager dropdown&gt;')
  </code></pre>
  
  <p>Managers dropdown in index.html</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;select class="form-control" id="next" name="division" data-error="Required!" required&gt;
      &lt;option value="default" disabled selected&gt;Select something&lt;/option&gt;
      &lt;option value="option1"&gt;Tom&lt;/option&gt;
      &lt;option value="option2"&gt;Bob&lt;/option&gt;
    &lt;/select&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>Employees dropdown in app.py</p>
  
  <pre><code>Employees = QuerySelectField('Employees', query_factory=getEmployees, allow_blank=True)
  </code></pre>
  
  <p>In index.html</p>
  
  <pre><code>&lt;div class="form-group" id="sel_user"&gt;
      {{ render_field(form.Employees,class="form-control", required="required") }}
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using jQuery with ajax to get the Manager name a user selects in the manager dropdown and then do something with it..</p>
  
  <pre><code>$(document).ready(function(){
  
      $("#next").change(function() {
  
          var Manager=($('#next option:selected').text());
          console.log(Manager);
  
          $.ajax({
              url: "/getEmployees",
              type: 'GET',
              contentType: 'application/json',
              dataType: 'json',
              // not sure what to do next..?
          });
      });
  });
  </code></pre>
  
  <p>Can anyone please help as what I should do next once I have the value a user selects in Managers dropdown?</p>