Question

我有两个（或在某些地方更多）下拉列表（选择）有几个选项。还有一个按钮用于清除下拉列表中的所有选定值。此清除按钮的一个方面无法满足我的需要。

仅当下拉列表中选择了带有值的选项时，才会显示该按钮，选中带有空值的选项后，按钮将被隐藏。我在两个下拉列表中选择了一些选项（显示按钮），然后在此下拉列表中将值改为一个没有值的选项（按钮被隐藏）。问题是，该按钮在下拉列表中有一个空值后隐藏。

只有当所有下拉列表都有一个空值的选定选项时，我才需要隐藏该按钮。这个jsfiddle说明了我的意思。

我使用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", ""); });

Answer 1

您必须检查所有列表中的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');

DEMO

Answer 2

使用此代码可以解决您的问题：

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';
        }

Reguards，

哈迪克帕特尔

Answer 3

嗨，我会尽量让所有的选择都有价值。如果他们的计数大于0，则应显示按钮。你可以用jquery filter funstion

实现这一点

if ( $('.option select').filter(function(0 { return $(this).val != ''; }).length > 0){
    //show button
}
else{
    //hide button
}

Answer 4

更新了您的fiddle。

$('.option select').change(function() {
    checkvalue();
    if(flag){
        $('input').show();
    }else{
        $('input').hide();
    }

}).trigger('change');

function checkvalue(){
    $('.option select').each(function(){
        if ($(this).val()!="") {
        flag = true;
        }else{
            flag = false;
        }
    });
}

您的DOM有多个选择标记。所以你的代码不起作用。

JavaScript - 根据所选选项隐藏按钮

4 个答案: