为什么选择类返回未定义的值？

Question

我试图弄清为什么我的选择列表选项值在按类获取时为什么返回未定义，但是如果通过id访问列表，则可以正常工作吗？

我尝试按类访问选择选项值，这不起作用。

javascript

此脚本为var listTopic返回未定义

var schoolSelect = $(".schoolSelect"),
stage2 = $("#stage2Div"),
stage3 = $("#stage3Div");

  getSelectValue = function() {
    var selectedValue = schoolSelect.val();
    var listTopic = String(selectedValue);
    console.log('This is the list topic' + ' ' + listTopic);
    if (listTopic == "Topic_MI_School_of_Phil") {
      console.log("hurray!")
    }
    else {
      console.log("boo!")
    }
    return listTopic;        
  };

  // Stage 2 Click Event
  stage2.click(function() {
    if (getSelectValue().length == 0) {
      popup.addClass("show");
    } else if (getSelectValue().length > 0) {
      for (var i = 0; i < getSelectValue().length; i++) {
        var message = createSLMessage("/topics/" + getSelectValue());
        sendMessage(message);
      }
    }
    // selectedOption()
  });
  //Stage 3 Click Event
  stage3.click(function() {
    if (getSelectValue().length == 0) {
      popup.addClass("show");
    } else if (getSelectValue().length > 0) {
      for (var i = 0; i < getSelectValue().length; i++) {
        var message = createFLMessage("/topics/" + getSelectValue());
        sendMessage(message);
      }
    }
    // selectedOption()
  });

html

<div class="lockdownPopup" id="clearLockdownPopup">
        <div class="lockdownPopupInner">
        <div class="lockdownPopupClose" id="clearLockdownClose">X</div>
        <select class="schoolSelect" size="2">
            <option value="Topic_MI_School_of_Phil">St Mary's High</option>
        </select></div>
        <div class="alertButton" id="clearAlertDiv">Clear Lockdown Alerts</div>

      </div>
      <div class="lockdownPopup" id="softLockdownPopup">
          <div class="lockdownPopupInner">
        <div class="lockdownPopupClose" id="softLockdownClose">X</div>
        <select class="schoolSelect" size="2">
          <option value="Topic_MI_School_of_Phil">St Mary's High</option>
        </select>
        <div class="alertButton" id="stage2Div">Initiate Soft Lockdown</div>
      </div>
      </div>
      <div class="lockdownPopup" id="fullLockdownPopup">
          <div class="lockdownPopupInner">
        <div class="lockdownPopupClose" id="fullLockdownClose">X</div>
        <select class="schoolSelect" size="2">
            <option value="Topic_MI_School_of_Phil">St Mary's High</option>
        </select>
        <div class="alertButton" id="stage3Div">Initiate Full Lockdown</div>
        </div>
      </div>

这将返回正确的值-唯一的区别是它是通过id访问的，显然，我一次只能以这种方式访问​​一个列表，所以我必须将我的代码增加三倍，而宁可避免

var schoolSelect = $("#schoolSelect"),
stage2 = $("#stage2Div"),
stage3 = $("#stage3Div");

  getSelectValue = function() {
    var selectedValue = schoolSelect.val();
    var listTopic = String(selectedValue);
    console.log('This is the list topic' + ' ' + listTopic);
    if (listTopic == "Topic_MI_School_of_Phil") {
      console.log("hurray!")
    }
    else {
      console.log("boo!")
    }
    return listTopic;        
  };

  // Stage 2 Click Event
  stage2.click(function() {
    if (getSelectValue().length == 0) {
      popup.addClass("show");
    } else if (getSelectValue().length > 0) {
      for (var i = 0; i < getSelectValue().length; i++) {
        var message = createSLMessage("/topics/" + getSelectValue());
        sendMessage(message);
      }
    }
    // selectedOption()
  });
  //Stage 3 Click Event
  stage3.click(function() {
    if (getSelectValue().length == 0) {
      popup.addClass("show");
    } else if (getSelectValue().length > 0) {
      for (var i = 0; i < getSelectValue().length; i++) {
        var message = createFLMessage("/topics/" + getSelectValue());
        sendMessage(message);
      }
    }
    // selectedOption()
  });

我希望返回正确的值。如果我将一个ID添加到任一选择列表中，则可以访问该ID，并返回正确的值。