jQuery从选择框中获取值并进行AJAX调用

Question

我有多个选择框，我想在其中获取每个选定选项的值，并基于选定选项进行AJAX调用。 我该如何实现？

到目前为止，我有：

$('select[name="restaurant_chosen"]').on('change', function() {
    var restaurant_id = $(this).val();
});

$('select[name="date_chosen"]').on('change', function() {
    var date_chosen = $(this).val();
});

$.ajax({
   type: 'GET',
   url: '/api/' + restaurant_id + '/' + date_chosen +
   success: function(data) {
     console.log(data)
   }, 
   error: function(data){
    console.log('error')
  }
 });

2个变量restaurant_id和date_chosen我得到not defined的错误。 我究竟做错了什么？

Answer 1

这就是应该的方式。 您在私有函数上下文中声明变量，您不能（也不能）从外部访问该变量。

一个简单的解决方案是，将两个变量的声明移出onchange事件处理程序（使其更具全局性）。

var restaurant_id;
    date_chosen;

$('select[name="date_chosen"]').on('change', function() {
   date_chosen = $(this).val(); // skip the var here
});

Answer 2

 function sendToServer(values, onSuccess, onError){ var restaurant_id, date_chosen; //here fill restaurant_id and date_chosen using values $.ajax({ type: 'GET', url: '/api/' + restaurant_id + '/' + date_chosen, //replace the plus by a comma success: function(data) { onSuccess(data); }, error: function(data){ onSuccess(data); } }); } $('select').on('change', function() { var values = []; $('select').each(function(index){ v = $(this).val(); n = $(this).attr("name"); values.push( {"name":n, "value":v} ); }); console.log("values: ", values); sendToServer(values, function(data){ console.log(data); }, function(data){ console.log('error', data); } ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="brand"> <option value="volvo">Volvo</option> <option value="audi">Audi</option> </select> <select name="color"> <option value="red">Red</option> <option value="blue">Blue</option> </select>