Global variable not changing on event

问题

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

回答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()

回答2:

I would do something like this.

// window.userValue = ''; // not necessary

$(document).ready(function(){
    var userValue;

    $('#my_SiteUsers').on('change', function(){
        RefreshGroupLists();
    });

    function RefreshGroupLists(){
        userValue = $('#my_SiteUsers').find(':selected').val();
        alert(userValue);
    }  
});

Its better to keep event handlers in your JS, not in your HTML, and to declare globals, though you shouldn't really need a global var for this, whatever you need to do with userValue can be put in RefreshGroupLists.

来源：https://stackoverflow.com/questions/19120122/global-variable-not-changing-on-event

标签

javascript

jquery

variables

global-variables