使用 JS 和 Dropwdown 按 ID 选择器切换显示/隐藏 DIV

Question

I have a dropdown menu, when a selection is made, it will show a div by ID selector.

When "1 Subscriber" is selected, it will display the div with the ID "sub1". When "2 Subscriber" is selected, it will display the div with the ID "sub1" & "sub2".

The issue is that when "2 Subscriber" is selected, it will show the divs with ID's "sub1", "sub2", "sub3", "sub4", "sub5".

What am I doing wrong, please help?

Thanks! :)

 function showHideSubscribers(sel) { var value = sel.value; if(value==0) document.getElementById('sub1').style.display = 'block'; if(value==1) document.getElementById('sub1').style.display = 'block'; document.getElementById('sub2').style.display = 'block'; if(value==2) document.getElementById('sub1').style.display = 'block'; document.getElementById('sub2').style.display = 'block'; document.getElementById('sub3').style.display = 'block'; if(value==3) document.getElementById('sub1').style.display = 'block'; document.getElementById('sub2').style.display = 'block'; document.getElementById('sub3').style.display = 'block'; document.getElementById('sub4').style.display = 'block'; if(value==4) document.getElementById('sub1').style.display = 'block'; document.getElementById('sub2').style.display = 'block'; document.getElementById('sub3').style.display = 'block'; document.getElementById('sub4').style.display = 'block'; document.getElementById('sub5').style.display = 'block'; };

 <select name="showHideSubscribers" id="showHideSubscribers" onchange="showHideSubscribers(this)"> <option value="0" selected="selected">1 Subscriber</option> <option value="1">2 Subscribers</option> <option value="2">3 Subscribers</option> <option value="3">4 Subscribers</option> <option value="4">5 Subscribers</option> </select> <div id="sub1" style="display:none">1 Subscriber</div> <div id="sub2" style="display:none">2 Subscriber</div> <div id="sub3" style="display:none">3 Subscriber</div> <div id="sub4" style="display:none">4 Subscriber</div> <div id="sub5" style="display:none">5 Subscriber</div> </div>

Answer 1

You missed {} on the if blocks you may not use them only when there is one statement in the if block:

function showHideSubscribers(sel) {
    var value = sel.value;  
    console.log(value)
    if(value==0)
        document.getElementById('sub1').style.display = 'block';
    if(value==1){
        document.getElementById('sub1').style.display = 'block';
        document.getElementById('sub2').style.display = 'block';
    }
    if(value==2){
        document.getElementById('sub1').style.display = 'block';
        document.getElementById('sub2').style.display = 'block';
        document.getElementById('sub3').style.display = 'block';
    }
    if(value==3){
        document.getElementById('sub1').style.display = 'block';
        document.getElementById('sub2').style.display = 'block';
        document.getElementById('sub3').style.display = 'block';
        document.getElementById('sub4').style.display = 'block';
    }
    if(value==4){
        document.getElementById('sub1').style.display = 'block';
        document.getElementById('sub2').style.display = 'block';
        document.getElementById('sub3').style.display = 'block';
        document.getElementById('sub4').style.display = 'block';
        document.getElementById('sub5').style.display = 'block';
    }

};