I want to pass id of previous selected value into another select function. I have 3 select menu that are dependent to each other. Example
user have to select the State first than , district after that they can select the city value.
With this code I got error of Uncaught ReferenceError: a is not defined How to solve this ?
This is what I have tried
$(document).ready(function() {
$("#state").change(function() {
let state = $(this).val();
getDistrict(state);
});
$("#district").change(function() {
let district = $(this).val();
getCity(district);
});
});
function getStateList() {
return axios.get(`${url}state`);
}
function getDistrict(state) {
return axios.get(`${url}dist?state_id=${state}`);
}
function getCity(district) {
return axios.get(`${url}city?district_id=${district}`);
}
The problem is, that a and b aren´t declared. You can use the var state to call getDistrict, because you use it in the enviroment of your function.
If you want to access state as a and district as b, you need to declare them outside of your functions. This could be something like this:
var a;
var b;
$(document).ready(function() {
$("#state").change(function() {
a = $(this).val();
getDistrict(a);
});
$("#district").change(function() {
b = $(this).val();
getCity(b);
});
});
function getStateList() {
return axios.get(`${url}state`);
}
function getDistrict(state) {
return axios.get(`${url}dist?state_id=${state}`);
}
function getCity(district) {
return axios.get(`${url}city?district_id=${district}`);
}
Promise.all([getStateList(), getDistrict(a), getCity(b)])
.then(function(results) {
//code
});