基於在第一個下拉列表中選擇的值使用ajax和jQuery填充第二個下拉列表

Question

我沒有得到任何關於此的信息。任何有關這方面的幫助將不勝感激！

我有兩個經理和員工的下拉菜單。

經理下拉列表默認包含經理列表。

我想通過查詢SQL Server數據庫與用戶在管理員下拉列表中選擇的管理員名稱來填充員工名稱的員工下拉列表。

因此對於例如如果某人在管理員下拉列表中選擇Tom作爲經理，那麼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>') 

在索引管理器下拉菜單。 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> 

我使用jQuery與Ajax獲得管理員名稱用戶選擇在經理下拉菜單，然後用它做的東西..

$(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下拉菜單中選擇的值，下一步我應該做什麼？

Answer 1

我覺得你幾乎沒有。我不知道Python或燒瓶，但我可以給你主要想法。

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 /瓶的知識：

• 在你的路線代碼，你必須閱讀manager參數用GET 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('')); 
  } 
  

我想這一切，你可以有一個如何進行，它適應您的特定需求的想法。我希望它有幫助。

Answer 2

使用AJAX/Jquery的

你可以做這樣的事情，

你有兩個下拉選擇，一個爲管理員選擇，二是員工選擇，該員工選擇下拉值依賴於經理選擇

1選擇下拉菜單中，

<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）。在（ 「變」， 「#manager_select」，函數（）{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); 
    } 
}) 

}）