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

Hide submit button if selected option value is null

本文关键字：隐藏 提交 按钮 选项 如果      更新时间：2023-09-26

我有以下形式：

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>

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

任何帮助将不胜感激。

你走对了路。但是缺少一些事件点：

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

看看这个工作小提琴

最短的方法是

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

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

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

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

您应该像这样将侦听器添加到您的选择中：

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

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

您好，请尝试以下解决方案，并告诉我您是否想要这样的东西： 

$(document).ready(function(){
  if($('select').val() == null){
  $('#submit-button').css('display','none');
}
$('select').on('change', function() {
$('#submit-button').css('display','block');
});
相关文章：