jQuery：隐藏按钮，直到选择最后一个下拉菜单答案

【问题标题】：jQuery: Hiding button until last dropdown is selectedjQuery：隐藏按钮，直到选择最后一个下拉菜单
【发布时间】：2015-02-10 14:54:32
【问题描述】：

这里是初学者编码器，我正在尝试通过我学校的 Schedule API 制作一个网络调度程序，所以我们有一堆相互构建的下拉菜单（学期、学校、学科、班级、部分）。直到最后一个下拉列表有一个选择（我们有一个选择按钮，它将部分保存到 cookie 并路由下一个下拉框），我们想要隐藏一个我们试图用 jQuery 找出的“添加”按钮。

不幸的是，它不起作用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#addButton').hide();
    if ($('#sectionSelect').value() === '') {
      $('#addButton').hide();
    } else {
        $('#addButtton').show();
    }
});
</script>

我们通过 cookie 保存了部分下拉菜单的值（因为它的变量通过 API 进行路由），那么 $('#sectionSelect').value 是否必须从 cookie 中引用？

谢谢

【问题讨论】：

你能在 jsFiddle.net 上发布一些东西吗

标签： javascript jquery html

【解决方案1】：

你有一个 jQuery 错误：

//This is wrong:
$('#sectionSelect').value()

//This is right:
$('#sectionSelect').val()

【讨论】：

【解决方案2】：

您希望每次更改选择按钮时触发显示/隐藏逻辑。所以这样的事情可能会起作用

$(document).ready(function() {
    $('#sectionSelect').change(function() {
      $('#addButton').hide();
      if ($('#sectionSelect').val() === '') {
        $('#addButton').hide();
      } else {
          $('#addButtton').show();
      }
    }
});

【讨论】：

【解决方案3】：

$(document).ready(function() {

  $("select").change(function() {

    var selected_val = $("select option:selected").val();
    var last_val = $("select option:last-child").val();

    if (selected_val === last_val) {
      $("#addButton").hide();
    } else {
      $("#addButton").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select>
  <option id="first" value="1">1</option>
  <option id="second" value="2">2</option>
  <option id="third" value="3">3</option>
</select>
<button id="addButton">ADD</button>

【讨论】：