Javascript 根据选项隐藏/显示div

我很困惑为什么它没有显示我的div。这只是一个简单的想法，我有两个div：

<div id="custom-report">
</div>

<div id="daily-report">
</div>

首先，我将使用css将它们全部隐藏，如下所示：

#custom-report {
    display: none;
}
#daily-report {
    display: none;
}

---

为什么，当我去浏览每日新闻时，它会显示出来，然后就消失了。如果我去导航自定义，它将正确显示我的div。

在第二种情况下，您应该使用

else if

而不是

if

Else

条件仅在第二个

条件失败时才考虑，而不是每次
if….else if….else流将解决此问题


$（'#selectedrep'）。更改（函数（）{
var selectedReport=$（this.val（）；
如果（selectedReport==1）{
document.getElementById（'daily-report'）.style.display=“block”；
document.getElementById（'custom-report'）.style.display=''；
}else if（selectedReport==2）{
document.getElementById（'custom-report'）.style.display=“block”；
document.getElementById（'daily-report'）。style.display=''；
}否则{
document.getElementById（'custom-report'）.style.display=“无”；
document.getElementById（'daily-report'）.style.display=“无”；
}
});
#自定义报告{
显示：无；
}
#日报{
显示：无；
}

风俗
每日的
---选择选项---
每日的
风俗
您在
if else
中犯了错误。在第二种情况下，您必须使用
if-else
，而不是仅使用
if
。请按照以下代码：


$（'#selectedrep'）。更改（函数（）{
var selectedReport=$（this.val（）；
如果（selectedReport==1）{
document.getElementById（'daily-report'）.style.display=“block”；
document.getElementById（'custom-report'）.style.display=''；
警报（“每日”）；
}
else if（selectedReport==2）{
document.getElementById（'custom-report'）.style.display=“block”；
document.getElementById（'daily-report'）。style.display=''；
警报（“自定义”）；
}
否则{
document.getElementById（'custom-report'）.style.display=“无”；
document.getElementById（'daily-report'）.style.display=“无”；
}
});
#自定义报告{
显示：无；
}
#日报{
显示：无；
}

自定义报告
日报
---选择选项---
每日的
风俗
为什么不能在IF语句前面添加“else”，这可能是您的问题

$('#selectedrep').change(function(){
    var selectedReport = $(this).val();
    if(selectedReport == 1) {
      document.getElementById('custom-report').style.display = 'none';
      document.getElementById('daily-report').style.display = "block";
      alert("daily");
}
else if(selectedReport == 2) {  
     document.getElementById('daily-report').style.display = 'none';
     document.getElementById('custom-report').style.display = "block";
     alert('custom');
}
else {
     document.getElementById('custom-report').style.display = "none"; 
     document.getElementById('daily-report').style.display = "none";
}
});

在第二种情况下，您应该使用
else if
而不是
if

基于您拥有
$（'#selectedrep'）.change（）
作为您的函数，完成jQuery解决方案

$('#selectedrep').change(function() {
  var selectedReport = $(this).val();
  if (selectedReport == 1) {
    $('#daily-report').show();
    $('#custom-report').hide();
  } else if (selectedReport == 2) {
    $('#custom-report').show();
    $('#daily-report').hide();
  } else {
    $('#custom-report').hide();
    $('#daily-report').hide();
  }
});

或者你可以把if…else全部去掉：

$("#selectdrep").on("click",function(){
    var selectedvalue = $(this).val();
    document.getElementById("custom-report").style.display = selectvalue == 1 ? "block" : "none";
    document.getElementById("daily-report").style.display = selectvalue == 2 ? "block" : "none";
})

只需在第二个条件中将
if
更改为
else if
即可！
$('#selectedrep').change(function() {
  var selectedReport = $(this).val();
  if (selectedReport == 1) {
    $('#daily-report').show();
    $('#custom-report').hide();
  } else if (selectedReport == 2) {
    $('#custom-report').show();
    $('#daily-report').hide();
  } else {
    $('#custom-report').hide();
    $('#daily-report').hide();
  }
});

$("#selectdrep").on("click",function(){
    var selectedvalue = $(this).val();
    if(selectedvalue == "1"){
        document.getElementById("custom-report").style.display = "block";
        document.getElementById("daily-report").style.display = "none";
    }else if(selectedvalue == "2"){
        document.getElementById("daily-report").style.display = "block";
        document.getElementById("custom-report").style.display = "none";
    }else{
        document.getElementById("custom-report").style.display = "none";
        document.getElementById("daily-report").style.display = "none";
    }
})

$("#selectdrep").on("click",function(){
    var selectedvalue = $(this).val();
    document.getElementById("custom-report").style.display = selectvalue == 1 ? "block" : "none";
    document.getElementById("daily-report").style.display = selectvalue == 2 ? "block" : "none";
})