从数据库中选择 SELECT 选项后如何显示/隐藏 DIV?

问题描述 投票:0回答:1

这是选择选项的代码;

<div class="modal-body row">
<form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data">
<div class="form-group col-md-6">
  <label for="exampleInputEmail1"><?php echo lang('categorie'); ?></label>
     <select class="form-control m-bot15" name="categorie" value='' id="p_category">
          <option value="#"> Sélectionner catégorie</option>
             <?php foreach ($categories as $category) { ?>
              <option value="category"><?php
                 if (!empty($setval)) {
                    if ($category->category == set_value('category')) {
                         echo 'selected';
                         }
                    }
                 if (!empty($patient->category)) {
                   if ($category->category == $patient->category) {
                       echo 'selected';
                     }
                  }
               ?> > <?php echo $category->category; ?> </option>
             <?php } ?> 
          </select>
        </div>

这是必须显示/隐藏的 div:

     <label for="exampleInputEmail1"><?php echo lang('name_Us'); ?></label>
     <input type="text" class="form-control" name="name_husband" id="nameUs" placeholder="">
                           
  <label for="exampleInputEmail1"><?php echo lang('number_pre'); ?></label>
  <input type="number" class="form-control" name="number_pre" id="nbreEnf"    placeholder="">
</div>

这是 JavaScript 代码:

        $('.divUs').hide();
        $(document.body).on('change', '#p_category', function () {
            var v = $("select.p_category option:selected").val()
            if (v == 'Fe_Ence') {
                $('.divUs').show();
            } else {
                $('.divUs').hide();
            }
        });
    });

我希望如果选择了元素(Fe_Ence),则可以显示 div,否则,它保持隐藏

javascript php jquery mysql
1个回答
0
投票

例如,您可以使用 :has 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="thingtohide">
        <h1>Hello</h1>
    </div>
    <div id="checkbox">
        <input type="checkbox">
    </div>
    <style>
        body:has(#checkbox input:checked) #thingtohide {
            visibility: hidden;
        }
    </style>
</body>
</html>

因此,如果父元素有一个选中的复选框,那么您可以定位与该父元素不同的子元素。

© www.soinside.com 2019 - 2024. All rights reserved.