javascript - 使用 JS 和下拉菜单通过 ID 选择器切换显示/隐藏 DIV

Question

我有一个下拉菜单，当进行选择时，它会显示一个按 ID 选择器的 div。

当选择“1 Subscriber”时，它将显示 ID 为“sub1”的 div。 当选择“2 Subscriber”时，它将显示 ID 为“sub1”和“sub2”的 div。

问题是当选择“2 订阅者”时，它会显示 ID 为“sub1”、“sub2”、“sub3”、“sub4”、“sub5”的 div。

我做错了什么，请帮忙？

谢谢! :)

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

您错过了 if block 上的 {}，只有当 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';
    }

};