Question

关于如何仅在某人选择类别时以及如果某人选择了某个类别并且未选择子类别（例如，人选择了选项＆＃34;选择子类别＆＃34）时，我可以显示或显示子类别的任何建议;），它会自动隐藏子类别选择框。

这是我的HTML代码

<!-- Row for Main Category Starts-->
<div class="row required">
<label for="category_level_1">Category</label>           o              
<div class="column">
    <select id="Category" >
    <option value="">Select Category</option>
    <?php
    $getCategory = $category->getAllCat();
    if($getCategory){
    while($result = $getCategory->fetch_assoc()){
    ?>
    <option value="<?php echo $result['catId']; ?>"><?php echo $result['catName']; ?></option>
    <?php } } ?>
    </select>                          
</div>
</div><!-- Row for Main Category Ends-->
<!-- Row for Sub Category Starts-->
    <div class="row hidden"  >
    <label for="subcategory">Subcategory</label>                           
    <div class="column">
    <select id="Subcategory" >
    <option value="">Select sub-category</option>
    </select>                            
</div>
</div>
 <!-- Row for Sub Category Ends-->

这是我的Ajax和Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#Category').on('change',function(){
    var categoryID = $(this).val();
    if(categoryID){
        $.ajax({
            type:'POST',
            url:'fetch.php',
            data:'catId='+categoryID,
            success:function(html){
                $('#Subcategory').html(html);
            }
        }); 
    }else{
        $('#Subcategory').html('<option value="">Select Category first</option>');
    }
}); 
  });
   </script>

Answer 1

加载#Subcategory后：

$(document).ready(function () {
  $('#Subcategory').parent().parent().hide();

然后在JS的这一部分：

$.ajax({
  type: 'POST',
  url: 'fetch.php',
  data: 'catId=' + categoryID,
  success: function (html) {
    $('#Subcategory').html(html).parent().parent().show();
  }
});

如果你愿意，你的else语句可以再次隐藏它。

OP在评论中添加

用户选择类别1并选择＆＃34;选择子类别＆＃34;作为子类别而不是一个，它将自动隐藏子类别

这是您的事件监听者：

$('#Subcategory').change(function () {
  if (!$(this).val()) {
    $(this).parent().parent().hide();
  }
});

$(document).ready(function(){
$('#Subcategory').parent().parent().hide();
$('#Subcategory').change(function () {
  if (!$(this).val()) {
    $(this).parent().parent().hide();
  }
});
$('#Category').on('change',function(){
    var categoryID = $(this).val();
    if(categoryID){
        $.ajax({
            type:'POST',
            url:'fetch.php',
            data:'catId='+categoryID,
            success:function(html){
                $('#Subcategory').html(html).parent().parent().show();
            }
        }); 
    }else{
        $('#Subcategory').html('<option value="">Select Category first</option>');
    }
}); 
  });

Answer 2

由于您的代码工作正常，您只想隐藏子类别，请使用以下

$('.column').css('display',”none”);

填写else

后，在您的jquery的SubCategory部分中

并且

$('.column').css('display',”block”)

在您的AJAX if块

中

您在技术上隐藏div subcategory而不是实际控件

注意：最好使用div的一些唯一id而不是类名来访问jquery。因此，请使用$（'＃ID_OF_Div'）。而不是$（'。column'）。

仅当有人选择类别

2 个答案: