Question

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

我已设法找到代码，并在用户更改值时退出＆＃34;

，使用JQuery -collapse函数使其工作

...我无法开始工作的是，如果从PHP页面中的查询填充下拉选择值并将其设置为＆＃34;拒绝＆＃34;以外的其他任何值，我需要它如果预先填充的值是＆＃34;拒绝＆＃34;则隐藏DIV。然后显示DIV，然后如果用户更改屏幕上的值，说＆＃34;否＆＃34;然后隐藏它。如果他们偶然选择＆＃34;拒绝＆＃34;然后再将它展示给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>

另外......有些帖子说使用＆＃39; hide＆＃39; /＆＃39;显示＆＃39;在JQuery ver x中折旧？但是我发现了使用它的最新JQuery版本的例子，我觉得很困惑。

Answer 1

这是因为您没有检查选择框的初始值。在onChange事件后添加以下代码： -

$(function(){
    var init_opt = $('#ReviewCriteria').val();
    if (init_opt == "Yes") {                     
        $('.NotAcceptedReason').collapse('hide');
    } else if (init_opt == "No") {
        $('.NotAcceptedReason').collapse('hide');
    } else if (init_opt == "NA") {
        $('.NotAcceptedReason').collapse('hide');
    } else {
        $('.NotAcceptedReason').collapse('show');
    }
});

Answer 2

您必须首次触发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>

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

2 个答案: