如果选定的选项值为空，则隐藏提交按钮

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>

如果下拉列表的选定索引是没有值的禁用占位符选项，我想隐藏提交按钮。选择颜色后，我想再次显示该按钮。

任何帮助将不胜感激。

Answer 1

你是在正确的方式。但是在事件中遗漏了一些要点：

1 - 整个代码必须在 DOM 准备好（文档加载）时执行

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

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

// 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");
}); 

看看这个工作小提琴