如果选中的选项值为null，则隐藏提交按钮

Question

我有以下表格：

​

var x = document.getElementById("submit-button");

if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
  <option disabled selected>Select colour</option>
  <option value="Orange">Orange</option>
  <option value="Apple">Apple</option>
  <option value="Lemon">Lemon</option>
</select>
  <button id="submit-button" type="submit">Click</button>
</form>

​

如果下拉列表的选定索引是没有值的禁用占位符选项，则我希望隐藏submit按钮。一旦选择了颜色，我想再次显示按钮。

任何帮助都将不胜感激。

Answer 1

你这样做是对的。但在事件中遗漏了一些要点：

1-当DOM准备就绪时，必须执行整个代码(加载文档)

2-您必须观察select更改事件以检查更改。

3-您可以使用jQuery .hide()和.show() do控制元素的可见性

// Executed when DOM is loaded
$(document).ready(function() {
   // Executed when select is changed
    $("select").on('change',function() {
        var x = this.selectedIndex;

        if (x == "") {
           $("#submit-button").hide();
        } else {
           $("#submit-button").show();
        }
    });

    // It must not be visible at first time
    $("#submit-button").css("display","none");
}); 

看这个工作小提琴

Answer 2

最短的路是

​

$(function(){
  $("select").on("change", function(){
    $("#submit-button").toggle(!!this.value);
  }).change();
});

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<form>
<select>
  <option selected value="">Select colour</option>
  <option value="Orange">Orange</option>
  <option value="Apple">Apple</option>
  <option value="Lemon">Lemon</option>
</select>
  <button id="submit-button" type="submit">Click</button>
</form>

​

Answer 3

当下拉列表发生变化时，您需要创建一个事件处理程序。在下面的示例中，默认情况下我隐藏了submit按钮，当下拉列表发生变化时，我将根据下拉列表中是否有选定的值来切换按钮的可见性。

我允许您的“选择颜色”选项可用，以便更好地演示事件处理程序是如何工作的。

​

$("#submit-button").hide();

$("select").on("change", function() {
  if (this.value)
    $("#submit-button").show();
  else
    $("#submit-button").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
  <option selected value="">Select colour</option>
  <option value="Orange">Orange</option>
  <option value="Apple">Apple</option>
  <option value="Lemon">Lemon</option>
</select>
  <button id="submit-button" type="submit">Click</button>
</form>

​