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

Question

我对此一无所知。任何有关这方面的帮助将不胜感激！

我有两个针对经理和员工的下拉菜单。

Managers 下拉菜单默认包含一个 Managers 列表。

我想通过使用用户在“经理”下拉列表中选择的经理名称查询 SQL Server 数据库来使用员工姓名填充“员工”下拉列表。

所以例如如果某人在“经理”下拉列表中选择 Tom 作为经理，则“员工”下拉列表应填充员工姓名，其中 Manager = Tom。

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

路由（我用来查询 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>')

index.html 中的经理下拉菜单

<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 调用中发送该名称，以便您可以在您的路由代码中获取它并使用它来过滤数组。您可以使用 ajax 调用的data 参数发送该值...

   $(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 缺乏了解，现在我有问题可以帮助您：

• 在您的 Route 代码中，您必须阅读 GET ajax 调用发送的 manager 参数。我不知道你是如何在 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(''));
  }
  

我认为通过所有这些，您可以了解如何进行，并根据您的特定需求进行调整。希望对你有帮助。

Answer 2

使用 AJAX/Jquery

你可以这样做，

您有两个下拉选择，一个作为经理选择，第二个是员工选择，员工选择下拉值取决于经理选择

第一个选择下拉菜单，

<select id="manager_select">
</select>

<select id="employee_select">
</select>

/* 这将填充你的 managerselect */

$.ajax({
    url: 'url that will display all list'
    dataType: 'json',
    type: 'get',
    success: function(data){
      var output = "";
       $.each(data, function(a,b){
          output += "<option value='"+b.id+"'>"+b.manager_select_name+"  </option>"
        $("#manager_select").append(output);
       });
    }
})

/* 这将在更改经理的值时填充您的员工选择*/

$(document).on("change", "#manager_select", function(){ var manager_id = $(this).attr("id");

 $.ajax({
     url: 'url that will display employee data where manager_id = manager_id ',
     type: 'POST',
     dataType: 'json',
     data: { 'manager_id' : manager_id } /* you are passing manager_id*/
     success: function(data){
          $("#employee_select").empty();
          var output = "";
          $.each(data, function(a,b){
              output += "<option id="+b.employee_id+">"+b.employee_desc+"</option>";
          })
          $("#employee_select").append(output);
     }
 })

})