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>

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

2 个答案: