0

So I'm currently getting the value of a dropdown menu on change, and then adding it to the id of a div that surrounds the dropdown menu.

I'm wanting to be able to use this value later on in my code but right now it seems that I'm getting an undefined variable probably because it's not assigned on page load.

What would be a good way/better way of getting this value or assigning the value to a variable? And what would be a good way of reloading or refreshing the page so that it can be updated to the new variable?

I want to use the selectedValue var in the if statement instead of the "Big 12".

The person who suggested it was the same as another question I don't think is understanding my question.

Any ideas?

$('#team-select').change(function() {
    var teamSelect = $(this).val();
   $('.select-team-menu').attr('id', teamSelect); 

});

var selectedValue = $('.select-team-menu').attr('id');
console.log(selectedValue);

    getGames().done(function(results){
        $.each(results, function (i, gameData){
            $.each(gameData, function(key, game){

                var gamesHome = game.home_team_conference;
                var gamesAway = game.away_team_conference;




                if(gamesHome == "Big 12" || gamesAway == "Big 12"){
Brett Kessler
  • 71
  • 6
  • 1
    Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Louys Patrice Bessette Jan 09 '18 at 02:08
  • 1
    Not enough known about what you are trying to do. Although `var selectedValue =...` is looking for something before it exists in the change event you also don't show how you use it – charlietfl Jan 09 '18 at 02:11
  • That is unclear how you use `selectedValue` after page load... But since it is defined on load, and the "source" of its value is modified on `change`... **Source change does not reflect in the variable value**. Whatever happens after `load` is out of "scope". Then you also have an async function running... – Louys Patrice Bessette Jan 09 '18 at 02:12
  • @charlietfl if you read I explain where I would use it and I already knew that it doesn't exist yet. I'm looking for a better way to do this. I'm going to use the selectedValue var in the if statement. – Brett Kessler Jan 09 '18 at 02:12
  • @LouysPatriceBessette should I just use a submit button and then reload the page with that value? Would that make things easier? – Brett Kessler Jan 09 '18 at 02:13
  • Sounds like you just need to do all this after the event occurs by wrapping it in a function and calling that function in `change` callback – charlietfl Jan 09 '18 at 02:14
  • To set the variable value **in** the `change` handler would be a start. (Kepp the onload value setting to have a value before change)... So just copy the line `var selectedValue = $('.select-team-menu').attr('id');` in the change handler and look if that solves the thing. – Louys Patrice Bessette Jan 09 '18 at 02:14
  • @charlietfl thank you I think this is the answer I might be looking for. So just do a function and then call the function on change? – Brett Kessler Jan 09 '18 at 02:15
  • @LouysPatriceBessette How would you suggest I do that, I've been trying to do this haha. – Brett Kessler Jan 09 '18 at 02:16
  • Yes and you can pass in that new value – charlietfl Jan 09 '18 at 02:16
  • @charlietfl if you could possibly write that out for me so I can better understand I can mark that as the best answer. – Brett Kessler Jan 09 '18 at 02:18
  • Its ONE line to copy! One you already have... – Louys Patrice Bessette Jan 09 '18 at 02:18
  • Ha... okay... In the handler, just skip the `var` ;) – Louys Patrice Bessette Jan 09 '18 at 02:20

1 Answers1

1

Wrap the getGames() in another function that you can call when the change event occurs

$('#team-select').change(function() {
    var teamSelect = $(this).val();
   $('.select-team-menu').attr('id', teamSelect);    
   // call function declared below and pass in new value from <select>
   loadSelectedTeam(teamSelect);
});


// declare function anywhere in file
function loadSelectedTeam(selectedValue){    
    getGames().done(function(results){
       $.each...    
          ....
           // use selectedValue passed into function
           if(gamesHome == selectedValue  || gamesAway == selectedValue ){....
charlietfl
  • 170,828
  • 13
  • 121
  • 150