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

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>

Answer 2

それはそうであるべきです。変数をプライベート関数コンテキスト内で宣言していますが、外部からアクセスすることはできません。

単純な解決方法は、onchangeイベントハンドラから2つの変数の宣言を移動します（グローバルにする）。

var restaurant_id; 
    date_chosen; 

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