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

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();

看下面的片段

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

如果您想按文本值而不是值来检查，请使用 beow 代码段:

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