Question

我有以下表格：

＆＃13;

var x = document.getElementById("submit-button");

if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}

＆＃13;

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

＆＃13;

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

任何帮助将不胜感激。

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

最短的方式是

＆＃13;

$(function(){
  $("select").on("change", function(){
    $("#submit-button").toggle(!!this.value);
  }).change();
});

＆＃13;

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

＆＃13;

Answer 3

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

我允许你选择颜色＆＃34;可用的选项只是为了更好地演示事件处理程序的工作方式。

＆＃13;

$("#submit-button").hide();

$("select").on("change", function() {
  if (this.value)
    $("#submit-button").show();
  else
    $("#submit-button").hide();
});

＆＃13;

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

＆＃13;

Answer 4

您应该像这样添加一个听众：

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

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

Answer 5

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

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

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

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

5 个答案: