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

时间:2017-10-15 17:41:37

标签: jquery python ajax flask flask-sqlalchemy

我没有得到任何关于此的信息。任何有关这方面的帮助将不胜感激!

我有两个经理和员工的下拉列表。

Managers下拉列表默认包含Managers列表。

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

因此,例如如果一个人在Managers下拉列表中选择Tom作为Manager,则Employees下拉列表应填充Employees名称,其中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..?
        });
    });
});

一旦我有了用户在Managers下拉菜单中选择的价值,有人可以帮我做下一步该做的事吗?

2 个答案:

答案 0 :(得分:2)

我认为你几乎就在那里。我不知道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);
            }
        });
    });
    
  4. 由于我对python / flask缺乏了解,现在是我有问题帮助你的地方:

    • 在路线代码中,您必须阅读使用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(''));
      }
      

    我认为,通过这一切,您可以了解如何继续,根据您的具体需求进行调整。我希望它有所帮助。

答案 1 :(得分:1)

使用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(&#34;更改&#34;,&#34;#manager_select&#34;,function(){   var manager_id = $(this).attr(&#34; id&#34;);

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

})