JavaScript - Hide buttons depending on the options selected

Question

I have two (or in some places more) dropdowns (select) with several options. There is also a button for clearing all selected values in dropdowns. There is one aspect of this clearing button that does not working properly for my needs.

The button is displayed only if dropdowns has selected option with value, after is selected options with empty value, button is hidden. After i choose some option in both dropdowns (button displayed) and then change value in one from this dropdowns to option without value (button is hidden). Problem is, that button is hidden after one from dropdowns has empty value.

I need that button to be hidden only if all dropdowns have a selected option with an empty value. This jsfiddle illustrates what I mean.

I use select2.js for the dropdowns.

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

You have to check the val from all lists. If at least one them has a value then dont hide the button. You have to use each() and a var as a flag.

Try:

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

Use this code your problem will be solved:

HTML Code :

<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 Script :

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,

Hardik Patel

Answer 3

hi I would try to get all the select with value. if their count is greater than 0 than button should be displayed. you can achieve that with jquery filter funstion

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

Answer 4

Updated your 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;
        }
    });
}

---

Your DOM has multiple select tags. So your code did not work.