如何根据PHP查询填充的下拉值显示或隐藏div

Steven Davisworth 发表于 Dev

史蒂文·戴维斯沃思（Steven Davisworth）

有人可以帮我弄这个吗...

当用户将值从“已拒绝”更改为其他值时，我设法找到了代码并使用JQuery -collapse函数使其正常工作

...我无法使用的是，如果下拉选择的值是从PHP页面中的查询中填充的，并且设置为除“拒绝”之外的任何值，那么我需要它来隐藏DIV，否则它是预先填充的值为“已拒绝”，则显示DIV，然后，如果用户将屏幕上的值更改为“否”，则将其隐藏。然后再次碰巧选择“已拒绝”，然后显示ETC。

<!-- Page Code -->
<div class="NotAcceptedReason">                                          
    <label class="font-bold text-danger">Please Enter Reason:</label>
    <textarea name="_initReviewCriteria002_Comment" class="form-control">
      My Reason Comment Here
    </textarea>
</div>
<!-- Selected Value pre-populated by db -->
<select class="form-control" name="_ReviewCriteria" id="ReviewCriteria">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    <option value="NA">NA</option>
    <option value="Rejected" selected>Rejected</option>
</select>

<!-- Script Function to handle onChange Event on dropdown selection -->
<script>
    $('.AcceptedReason').addClass('collapse');

    $('#ReviewCriteria').change(function () {
        opt = $(this).val();
        if (opt == "Yes") {                     
            $('.NotAcceptedReason').collapse('hide');
        } else if (opt == "No") {
            $('.NotAcceptedReason').collapse('hide');
        } else if (opt == "NA") {
            $('.NotAcceptedReason').collapse('hide');
        } else {
            $('.NotAcceptedReason').collapse('show');
        }
    }); 
</script>

还...有些帖子说在JQuery ver x中不建议使用'hide'/'show'？但是我正在寻找使用它的最新JQuery版本的示例，这让我感到困惑。

扎卡里亚·阿查尔基（Zakaria Acharki）

您必须change()首次触发，添加以下行：

$(function(){
    $('.AcceptedReason').addClass('collapse');
    $('#ReviewCriteria').change();
    ....
})

如果合并条件，您的代码也可以更加有条理：

if (opt === "Yes" || opt === "No" || opt === "NA") {                     
    $('.NotAcceptedReason').collapse('hide');
} else {
    $('.NotAcceptedReason').collapse('show');
}

如果可以使用slideUp/slideDown函数会更好，请查看下面的示例。

希望这可以帮助。

$(function(){
  collapseDiv($('#ReviewCriteria').val());

  $('body').on('change', '#ReviewCriteria', function () {
    collapseDiv($(this).val());
  })
})

function collapseDiv(opt){
  if (opt === "Yes" || opt === "No" || opt === "NA") {                     
    $('.NotAcceptedReason').slideUp();
  } else {
    $('.NotAcceptedReason').slideDown();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<!-- Page Code -->
<div class="NotAcceptedReason">                                          
  <label class="font-bold text-danger">Please Enter Reason:</label>
  <textarea name="_initReviewCriteria002_Comment" class="form-control">
    My Reason Comment Here
  </textarea>
</div>
<!-- Selected Value pre-populated by db -->
<select class="form-control" name="_ReviewCriteria" id="ReviewCriteria">
  <option value="Yes">Yes</option>
  <option value="No" selected>No</option>
  <option value="NA">NA</option>
  <option value="Rejected">Rejected</option>
</select>