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

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

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

我允许您使用 "Select colour" 选项只是为了更好地演示事件处理程序的工作原理。

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

Answer 2

您应该像这样向 select 添加一个侦听器：

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

它将检查每次更改选项时，在选项没有值时隐藏按钮并显示该按钮。此外，它会首先触发隐藏初始情况。

Answer 3

你是对的。但是缺少一些事件点：

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

时执行

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

3 - 您可以使用 jQuery .hide() and .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");
});

看这个working fiddle

Answer 4

最短路线是

$(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 5

您好，请尝试以下解决方案，如果您想要这样的解决方案，请告诉我：

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

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

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

Hide submit button if selected option value is null

html

javascript

jquery

drop-down-menu