javascript - Global variable not changing on event

Question

I have a global variable called userValue. When the page loads, this value is finding the selected option and storing that options value. On load it would be storing default or null since the option is disabled. However, onchange (more options populate dynamically per site), I'm trying to store the value of the selected option globally so I can simply keep reusing the varialbe userValue. What I have below works properly when I include:

   userValue = $('#my_SiteUsers').find(':selected').val(); 

in the RefreshGroupList() function, but if i have to do that, doesn't that defeat the purpose of having a global variable? Right now, any change I make returns "default"

HTML:

 <select id="my_SiteUsers" style="width:200px;" onchange="RefreshGroupLists()">
        <option value='default' disabled="disabled">Select a user</option>
      </select>

JS:

  var user, userValue, userText, group, strHTMLSiteUsers, strHTMLSiteGroups, strHTMLAvailable, strHTMLAssigned, arrOptionsAssigned, arrGroups, arrUsers, intOpts, booMatch, booErr;

        $(document).ready(function(){ 
            user = $('#m

y_SiteUsers');
        userValue = $('#my_SiteUsers').find(':selected').val();
        userText = $('#my_SiteUsers').find(':selected').text();
        group = $('#my_SiteGroups');
        groupsAssigned = $("#my_SPGroupsAssigned").html("");
        groupAvailable = $("#my_SPGroupsAvailable").html("");
        userAssigned = $("#my_SPUsersAssigned").html("");
        userAvailable = $("#my_SPUsersAvailable").html("");

        $("button").click(function() { return false; });

        populateUsers();
            populateGroups();
        });


function RefreshGroupLists(){
            //Populate the Groups Assigned
          $().SPServices({
              operation: "GetGroupCollectionFromUser",
              userLoginName: userValue,
              async: true,
              completefunc: function(xData, Status) {
                $(xData.responseXML).find("errorstring").each(function() {
                  alert("User not found");
                  booErr = "true";
                  return;
                });
                $(xData.responseXML).find("Group").each(function() {
                  strHTMLAvailable += "<option value='" + $(this).attr("Name") + "'>" + $(this).attr("Name") + "</option>";
                  arrOptionsAssigned[intOpts] = $(this).attr("Name");
                  intOpts = intOpts + 1;
                });
                groupsAssigned.append(strHTMLAvailable);
              }
          });
}

JSFiddle

Answer 1

Since you intend that the value of $('#my_SiteUsers').find(':selected').val() changes assigning it as you did doesn't really help you. String values are copied by-value, you want a reference.

What you can do just keep a reference to the DOM element:

 userValueHolder = $('#my_SiteUsers').find(':selected')

and request the value when you need it with useuserValueHolder.val()