我只想默认隐藏一个按钮,当我选择任何下拉列表时,按钮就会出现
$(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 但它对我不起作用..
最佳答案
先隐藏按钮,然后检查是否没有值选择隐藏或显示(使用值长度如下)
$(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>
关于javascript - 如何使用下拉选项隐藏和显示按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58040671/