隐藏，如果选定的选项值为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>

如果下拉的选择的指标是没有价值的残疾人占位符选项，我想隐藏提交按钮。只要选择一种颜色，我想再次显示按钮。

任何帮助将不胜感激。

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

看看这个working fiddle

Answer 2

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

我允许您选择“选择颜色”选项，以更好地展示事件处理函数的工作方式。

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

你应该监听器添加到您的选择是这样的：

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

它会检查每一个更改的选项时，隐藏的按钮时，期权没有价值并在它出现时显示它。此外，它会触发，首先隐藏的初始情况。

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