|
|
相关文章推荐
提问
问
JavaScript -根据选择的选项隐藏按钮
Stack Overflow用户
提问于
2014-05-15 12:21:05
EN
我有两个(或在一些地方更多)下拉(选择)与几个选项。还有一个按钮，用于清除下拉列表中所有选定的值。这个清除按钮有一个方面不适合我的需要。
只有当下拉列表选择了带有值的选项时，才会显示该按钮；在选择了带有空值的选项之后，按钮才会被隐藏。在两个下拉列表中选择一些选项后(显示按钮)，然后将其中一个下拉列表中的值更改为没有值的选项(按钮是隐藏的)。问题是，该按钮隐藏后，一个从下拉有空的价值。
我需要该按钮被隐藏，只有当所有下拉有一个选择的选项与一个空的值。这个 小提琴 说明了我的意思。
我用
select2.js
来表示下降。
HTML：
<input type="button" class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>Javascript：
$('select').select2();
$('.option select').change(function() {
var id=$(this).val();
if (id=="") {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}).trigger('change');
$(".opt-clear").click(function() { $(".option select").select2("val", ""); });
4
948
0
票数 1
EN
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-05-15 12:27:46
您必须从所有列表中检查
val
。如果至少有一个它们有一个值，那么不要隐藏按钮。您必须使用
each()
和var作为标志。
尝试：
$('.option select').change(function () {
var flag = 1;
$(".option select").each(function (index) {
var id = $(this).val();
if (id != "") {
flag = 0;
if (flag) {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}).trigger('change');
票数 1
EN
Stack Overflow用户
发布于 2014-05-15 13:02:34
使用此代码，您的问题将得到解决：
HTML代码：
<input type="button" id="btnChangeddValue" onclick="ddChangeValue();" style="display: none;"
class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select id="dd1" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div class="option">
<select id="dd2" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>Js脚本：
function ddChange(ddValue) {
if (ddValue != "" && ddValue != null) {
// $('#btnChangeddValue').css({ 'display': 'block' });
document.getElementById('btnChangeddValue').style.display = 'block';
else {
document.getElementById('btnChangeddValue').style.display = 'none';
function ddChangeValue() {
document.getElementById('dd1').value = "";
document.getElementById('dd2').value = "";
document.getElementById('btnChangeddValue').style.display = 'none';
推荐文章