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

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>

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

任何帮助都将不胜感激。

- nitroxis

---

可能是隐藏提交按钮直到表单有效的重复问题。 - Rick Smith

Answer 1

你已经朝着正确的方向前进了，但在事件方面还有一些遗漏：

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

2 - 你必须观察选择变化事件以检查更改

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

看这个实用代码示例

- nanndoj

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>

- Yaron U.

Answer 3

你应该像这样为你的 select 添加一个监听器：

$('form select').on('change', function(){
    if($(this).val() == null){
        $("#submit-button").hide();
    }else{
        $("#submit-button").show();
    }
}).change();

每次更改选项时，它都会进行检查，当选项没有值时隐藏按钮，并在有值时显示它。此外，它将在最初的情况下触发以隐藏。

- douglasf89

Answer 4

你好，友情提示，请尝试以下解决方案并告诉我是否需要类似的内容：

$(document).ready(function(){
  if($('select').val() == null){
  $('#submit-button').css('display','none');
}

$('select').on('change', function() {
$('#submit-button').css('display','block');
});

- Robin

Answer 5

你需要为下拉菜单的更改创建一个事件处理程序。在下面的示例中，我默认隐藏了提交按钮，当下拉菜单更改时，根据下拉菜单中是否有选定值，切换按钮的可见性。

我允许你的“选择颜色”选项可用，只是为了更好地演示事件处理程序的工作原理。

$("#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>

- Dave