隐藏/显示div取决于选项

Question

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

<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 流程可以解决此问题。

＆＃13;

＆＃13;

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

＆＃13;

#custom-report {
  display: none;
}

#daily-report {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

简化代码 -

＆＃13;

＆＃13;

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

＆＃13;

#custom-report {
  display: none;
}

#daily-report {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用jQuery（无需css） -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你在if else犯了错误。在第二种情况下，您必须使用if else而不是if。请遵循以下代码::

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

也只是一件事当您使用 jQuery onchange事件时，您可以对hide和show使用 jQuery 。请按照工作jsfiddle链接:: 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

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

Answer 5

$("#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 6

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