Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How can I show/hide a DIV after selecting a SELECT option from the database?

This is the code for Select options:

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

This is the div which must be Shown/Hidden:

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

And this is the JavaScript code:

    $(document).ready(function () {
        $('.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();
            }
        });
    });

I would like that if the element (Fe_Ence) is selected, then the div can be displayed, otherwise, that it remains hidden

Tags:

2

Answers


  1. 0

    you can use the :has selector for example

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

    So if a parent element has a checkbox that is checked then you can target a different child from that parent.

    Login or Signup to reply.
  2. 0

    There are several problems with your code:
    You should use #p_category option:selected instead of select.p_category option:selected in the JavaScript code and the option value for comparison should be ‘Fe_Ence’ instead of ‘category’.
    Also the value attribute of the tag should be the actual category value.

    For the selection section, your code should be changed as follows:

    <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="<?php echo $category->category; ?>" <?php
                    if (!empty($setval) && $category->category == set_value('category')) {
                        echo 'selected';
                    }
                    if (!empty($patient->category) && $category->category == $patient->category) {
                        echo 'selected';
                    }
                    ?>><?php echo $category->category; ?></option>
                <?php } ?>
            </select>

    And your JavaScript code should also be changed as follows:

    
<script>
    $(document).ready(function () {
        $('.divUs').hide();
        $(document.body).on('change', '#p_category', function () {
            var v = $("#p_category option:selected").val();
            if (v == 'Fe_Ence') {
                $('.divUs').show();
            } else {
                $('.divUs').hide();
            }
        });
    });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search