使用ajax和jQuery根据烧瓶中第一个下拉列表中选择的值填充第二个下拉列表

Question

我对此一无所知。任何帮助对此将不胜感激！

对于经理和员工，我有两个下拉菜单。

“经理”下拉列表默认包含“经理”列表。

我想通过使用用户在Managers下拉列表中选择的Manager名称查询SQL Server数据库来用雇员名称填充雇员下拉列表。

因此，例如，如果某人在“经理”下拉列表中选择“汤姆”作为经理，则“员工”下拉列表应填充“员工”名称，其中经理=汤姆。

到目前为止，我有以下代码：

路由（我用于查询SQL Server数据库以根据经理名称获取员工列表）：

@app.route ('/getEmployees', methods=['GET'])
def getEmployees():
    engine = create_engine('mssql+pyodbc://<server name>/<DB name>?driver=SQL+Server+Native+Client+11.0')
    Base = declarative_base(engine)

    class Bookmarks(Base):
        __tablename__ = '<table name>'
        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='<I want to populate this with the manager name a user selects in the Manager dropdown>')

索引中的经理下拉列表

<div class="form-group">
  <select class="form-control" id="next" name="division" data-error="Required!" required>
    <option value="default" disabled selected>Select something</option>
    <option value="option1">Tom</option>
    <option value="option2">Bob</option>
  </select>  
</div>

员工在app.py中的下拉列表

Employees = QuerySelectField('Employees', query_factory=getEmployees, allow_blank=True)

在index.html中

<div class="form-group" id="sel_user">
    {{ render_field(form.Employees,class="form-control", required="required") }}
</div>

我正在使用带有ajax的jQuery来获取用户在管理器下拉列表中选择的管理器名称，然后对其进行处理。

$(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..?
        });
    });
});

在用户在“经理”下拉菜单中选择了值之后，任何人都可以帮忙，下一步该怎么做？

Answer 1

我想你快到了。我不了解python或flask，但我可以给您主要思想。

1. 选择管理器后，您将获得管理器名称，并且必须在ajax调用中发送该名称，因此可以在“路由”代码中获取它，并使用它来过滤数组。您可以使用dataajax调用的参数发送该值。

   $(document).ready(function(){
   
   $("select#next").change(function() {
   
       var managerName = $(this).find('option:selected').text();
   
       $.ajax({
           type: 'GET',
           url: "/getEmployees",
           data: { manager: managerName }
           contentType: 'application/json',
           dataType: 'json'
       });
   });
   

   });

2. 在ajax调用中，创建一个成功回调函数，当您收到成功响应时将调用该函数。像这样

   $(document).ready(function(){
   
   $("select#next").change(function() {
   
       var managerName = $(this).find('option:selected').text();
   
       $.ajax({
           type: 'GET',
           url: "/getEmployees",,
           data: { manager: managerName }
           contentType: 'application/json',
           dataType: 'json',
           success: function(response) {
           }
       });
   });
   

   });

3. 您还可以添加支票以验证您是否选择了经理或未选中。如果您取消选择经理，则可以清空所选的员工，将其禁用，显示所有员工或您想要的任何员工。

   $(document).ready(function(){
   
   $("select#next").change(function() {
   
       if ($(this).val() != 'default') {
   
           var managerName = $(this).find('option:selected').text();
   
           $.ajax({
               type: 'GET',
               url: "/getEmployees",,
               data: { manager: managerName }
               contentType: 'application/json',
               dataType: 'json',
               success: function(response) {
               }
           });
       }
       else {  // No manager selected.
           // Do what you wnat when there's no manager selected.
           // For example, if you'd want to empty and disable the employees select...
           $('select#sel_user').html('').prop('disabled',true);
       }
   });
   

   });

现在由于我对python / flask的了解不足，因此在帮助您方面遇到问题：

• 在您的路由代码中，您必须读取managerGET ajax调用发送的参数。我不知道您如何在python / flask中做到这一点，但这必须很容易。在PHP将是公正的$_GET['manager']。通过快速搜索，看起来可能像request.GET['username']，但是您会比我更好地知道它。您必须获取该参数并将该值放在最后一个返回行中，例如…

  return session.query(Bookmarks).filter_by(Manager=request.GET['username'])
  

• 我不清楚此回复的格式，因此我不知道如何提取信息以创建员工选择。查看您的ajax调用，您说响应为JSON格式，但是我需要查看该响应的示例以向您显示确切的代码。这个想法是，您必须获取该信息并在ajax调用的成功函数中创建选项，然后将该选项放入员工选择中。就像是…

        // Imagine that your response is an array of objects similar to this
    // [{"name": "Tommy", "other": "value10"},{"name": "Jim", "other": "value32"},...]

    success: function(response) {

        var options = [];
        for (var i=0, l=response.length; i<l; i++)
            options.push('<options value="'+response[i].other+'">'+response[i].name+'<options>');

        $('select#sel_user').html(options.join(''));
    }

我认为所有这些都可以使您了解如何进行操作，使其适应您的特定需求。希望对您有所帮助。