как скрыть и показать кнопку с помощью выпадающего меню?

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

добавьте 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
  }
 });
});

Answer 2

Другой способ - использовать jQuery toggleClass :

1. Добавить hidden класс к кнопке, он будет скрывать кнопку при первой загрузке.

2. Используйте toggleClass внутри change событие select, например, так:

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

В основном вы предотвращаете переключение класса, когда выбранный элемент не является первым элементом.

Здесь работает скрипка.

Answer 3

Это можно сделать следующим образом в 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 4

Сначала спрячьте кнопку, затем проверьте, не выбрано ли значение, чтобы скрыть или показать (используя длину значения, как показано ниже)

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