如何使用下拉选项隐藏和显示按钮？

Question

我只想默认隐藏一个按钮，当我选择任何下拉列表时，按钮就会出现

FIDDLE HERE

$(function() {
  $('#cashbill').change(function() {
    $('#bill_icon').hide();
    $('#bill_icon' + $(this).val()).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
  <label class="col-sm-12 control-label p-sm-0">Bill type :</label>
  <select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
    <option value="">Choose an items</option>
    <option value="1">Raw</option>
    <option value="2">Spare</option>
    <option value="3">Others</option>
  </select>
</div>

<div class="form-group cash-billbtn">
  <label class="col-sm-12 control-label p-sm-0"></label>
  <button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>

显示..我刚刚尝试了 jQuery，但它不适合我..

Answer 1

先隐藏按钮，然后检查是否没有值选择隐藏或显示（使用值长度如下）

$(this).val().length ?  $('#bill_icon').show() :  $('#bill_icon').hide();

见下sn-p

$(function() {
 
  $('#bill_icon').hide();
  $('#cashbill').change(function() { 
     $(this).val().length ?  $('#bill_icon').show() :  $('#bill_icon').hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
  <label class="col-sm-12 control-label p-sm-0">Bill type :</label>
  <select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
    <option value="">Choose an items</option>
    <option value="1">Raw</option>
    <option value="2">Spare</option>
    <option value="3">Others</option>
  </select>
</div>

<div class="form-group cash-billbtn">
  <label class="col-sm-12 control-label p-sm-0"></label>
  <button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>

如果您想通过文本值而不是值来检查，请使用以下 sn-p ：

$(function() {
 
  $('#bill_icon').hide();
  $('#cashbill').change(function() { 
    var text = $(this).children("option:selected").text();
   ( text == "Raw" || text == "Spare"  )?  $('#bill_icon').show() :  $('#bill_icon').hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
  <label class="col-sm-12 control-label p-sm-0">Bill type :</label>
  <select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
    <option value="">Choose an items</option>
    <option value="1">Raw</option>
    <option value="2">Spare</option>
    <option value="3">Others</option>
  </select>
</div>

<div class="form-group cash-billbtn">
  <label class="col-sm-12 control-label p-sm-0"></label>
  <button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>

Answer 2

在 jQuery 中可以这样做：

$(function() {
    $('#bill_icon').hide();

  $('#cashbill').change(function() {
    if (this.value) $('#bill_icon').show();
    else $('#bill_icon').hide();
  });
});

但这有一些问题： - 如果您的页面延迟加载，它将显示按钮，然后将其隐藏（闪烁项目） - 这取决于是否启用了 JS

我建议你，隐藏css上的按钮，然后控制它的可见性。

---

当我想要这种行为时我会怎么做：

<label>Bill type :</label>
<select name="cashbill" id="cashbill" required>
  <option value="">Choose an items</option>
  <option value="1">Raw</option>
  <option value="2">Spare</option>
  <option value="3">Others</option>
</select>
<button type="button">Bill</button>

在 CSS 上默认隐藏，仅在 select 有有效选项时显示：

select:invalid + button {
  display: none;
}
select:valid + button {
  display: inline-block;
}

Answer 3

另一种方法是使用 jQuery 的 toggleClass:

1. 给按钮添加hidden类，它会在第一次加载时隐藏按钮。

2. 在select 的change 事件中使用toggleClass，如下所示：

   $('#cashbill').change(function() {
       $('#bill_icon').toggleClass('hidden', $(this).val() === '');    
   });
   

基本上，当所选项目不是第一项时，您会阻止切换类。

Here 正在工作。

Answer 4

像这里一样在上面添加css。

  .bill-btn{
    display: none;
  }

像这样改变你的 jquery。

$(function() {
   $('#cashbill').change(function() {
   if($(this).val() != "others"){
    $('#bill_icon').hide();
    $('#bill_icon' + $(this).val()).show();
    $(".bill-btn").show(); // added this line here
  }
 });
});