隐藏/显示div取决于选项

Question

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

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

现在，我有一个选择，当我想隐藏或显示它们时选择哪个选择：

<select class="form-control" id="selectedrep">
    <option value="0">--- SELECT OPTION ---</option>
    <option value="1">Daily</option>
    <option value="2">Custom</option>
</select>

我正在这样做的JavaScript：

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

，首先，我将使用我的CSS隐藏所有内容：

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

为什么会这样，当我每天导航时，它将显示出来，只是消失了。如果我要进行自定义，它将正确显示我的div。

Answer 1

在您的第二个条件下，您应该具有else if而不是if

Else仅在第二个if条件失败时才考虑条件，而不是每次。 if....else if...else Flow将解决此问题。

$('#selectedrep').change(function() {
  var selectedReport = $(this).val();
  if (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 = '';
  } else {
    document.getElementById('custom-report').style.display = "none";
    document.getElementById('daily-report').style.display = "none";
  }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
  CUSTOM
</div>
<div id="daily-report">
  DAILY
</div>
<select class="form-control" id="selectedrep">
    <option value="0">--- SELECT OPTION ---</option>
    <option value="1">Daily</option>
    <option value="2">Custom</option>
</select>

简化的代码 -

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
  CUSTOM
</div>
<div id="daily-report">
  DAILY
</div>
<select class="form-control" id="selectedrep">
    <option value="0">--- SELECT OPTION ---</option>
    <option value="1">Daily</option>
    <option value="2">Custom</option>
</select>

使用jQuery(无需拥有css( -

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
  CUSTOM
</div>
<div id="daily-report">
  DAILY
</div>
<select class="form-control" id="selectedrep">
    <option value="0">--- SELECT OPTION ---</option>
    <option value="1">Daily</option>
    <option value="2">Custom</option>
</select>

Answer 2

您在if else中犯了错误。在第二个条件下，您必须使用if else而不是if。请按以下代码::

遵循

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="custom-report">
Custom Report
</div>
<div id="daily-report">
Daily Report
</div>
<select class="form-control" id="selectedrep">
    <option value="0">--- SELECT OPTION ---</option>
    <option value="1">Daily</option>
    <option value="2">Custom</option>
</select>

也只有一件事，您正在使用 jquery onchange事件您可以将 jquery 用于hide和show。请关注工作jsfiddle link :: link

Answer 3

为什么不能在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";
}
});

Answer 4

$("#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";
    }
})

Answer 5

，或者您可以完全摆脱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";
})

Answer 6

在您的第二个条件下，您应该有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();
  }
});