全局变量不随事件改变

Question

我有一个名为 userValue 的全局变量。当页面加载时，此值正在查找所选选项并存储该选项值。加载时它将存储默认值或 null，因为该选项已禁用。但是，onchange（每个站点动态填充更多选项），我试图全局存储所选选项的值，以便我可以简单地继续重用变量 userValue。当我包含以下内容时，我下面的内容可以正常工作：

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

在 RefreshGroupList() 函数中，但如果我必须这样做，这不会违背拥有全局变量的目的吗？现在，我所做的任何更改都会返回“默认”

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

由于您打算将 $('#my_SiteUsers').find(':selected').val() 的值更改为您所做的分配它并没有真正帮助您。字符串值是按值复制的，您需要参考。

您可以做的只是保留对 DOM 元素的引用：

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

并在需要时通过useuserValueHolder.val()请求该值

Answer 2

我会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);
    }  
});

最好将事件处理程序保留在您的 JS 中，而不是 HTML 中，并声明全局变量，尽管您实际上不需要为此使用全局变量，但您需要对 userValue 执行的任何操作都可以放在 RefreshGroupLists 中。