JQuery - accessing a VAR in a function which I will need in another function?
Ok so in my html/js i have a form that updates based on the users previous selection. On the last stage i have a select menu where the user will choose their city. I have stored the value of the selected item in my Options list with the id #myCity to the following.
('#myCity').change(function(){
var CityValue = $("#myCity").val();
});
Once that value is set, my form then displays the submit button
<input type="submit" id="go" value="Submit" onclick="getweather()" />
This is where i start to have a bit of bother. In my getweather() function i want to be able to take 开发者_JS百科the var CityValue from above and append it to another var so i can load a specific page.
function getweather(){
var CityValue;
var to_load = 'getweather.php?p='+ CityValue +'.html';
$('#weather').empty().append(to_load);
}
but in my testing i do not think that my getweather() function is able to read my desired var. Can anyone suggest a solution?
Well, the first function you specified (the event handler for onchange) doesn't do anything right now. You can just remove it and edit the second function like this:
function getweather(){
var CityValue = $("#myCity").val();
var to_load = 'getweather.php?p='+ CityValue +'.html';
$('#weather').empty().append(to_load);
}
You declared the CityValue
only in the function scope that you cannot access from outside. Either declare your variable globally:
var CityValue;
$('#myCity').change(function(){
CityValue = $("#myCity").val();
});
function getweather() {
var to_load = 'getweather.php?p='+ encodeURIComponent(CityValue) +'.html';
$('#weather').empty().append(to_load);
}
Or just call $("#myCity").val()
in your getweather
function:
function getweather() {
var to_load = 'getweather.php?p='+ encodeURIComponent($("#myCity").val()) +'.html';
$('#weather').empty().append(to_load);
}
Well, the first function you specified (the event handler for onchange) doesn't do anything right now. You can just remove it and edit the second function like this:
You can then add this function call to the change event.
function getweather(){
var CityValue = $("#myCity").val();
var to_load = 'getweather.php?p='+ CityValue +'.html';
$('#weather').empty().append(to_load);
}
$('#myCity').change(getweather);
The more elegant answer to the question is in using jQuery data API. This allows you to store arbitrary data within an object rather than declaring variables, keeping everything in a nice OOP manner. So, to do what you want would mean storing the value like so:
$('#myCity').change(function(){
$("#myCity").data("CityValue", $("#myCity").val());
});
This way you would be able to retrieve it like so:
function getweather(){
var to_load = 'getweather.php?p='+ $("#myCity").data("CityValue") +'.html';
$('#weather').empty().append(to_load);
}
精彩评论