JavaScript -根据选择的选项隐藏按钮
JavaScript -根据选择的选项隐藏按钮
提问于 2014-05-15 12:21:05
我有两个(或在一些地方更多)下拉(选择)与几个选项。还有一个按钮，用于清除下拉列表中所有选定的值。这个清除按钮有一个方面不适合我的需要。
只有当下拉列表选择了带有值的选项时，才会显示该按钮；在选择了带有空值的选项之后，按钮才会被隐藏。在两个下拉列表中选择一些选项后(显示按钮)，然后将其中一个下拉列表中的值更改为没有值的选项(按钮是隐藏的)。问题是，该按钮隐藏后，一个从下拉有空的价值。
我需要该按钮被隐藏，只有当所有下拉有一个选择的选项与一个空的值。这个小提琴说明了我的意思。
我用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>
<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
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');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>
<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';
}卫兵，
哈迪克·帕特尔
Stack Overflow用户
发布于 2014-05-15 12:29:46
嗨，我试着得到所有有价值的选择。如果它们的计数大于0，则应显示按钮。您可以使用jquery 滤波功能实现这一点。
if ( $('.option select').filter(function(0 { return $(this).val != ''; }).length > 0){
//show button
}
else{
//hide button
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23678072
复制相关文章
相似问题
腾讯云开发者
