-1

I have a hidden div called recipeDetailsDiv inside a form as below

$("#recipes").change(function() {
  var selectedVal = $("#recipes").val();
  if (selectedVal != "") {
    $("#recipeDetailsDiv").show();
  }
});
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<form>
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="recipes">Recipes</label>
        <select class="form-control" id="recipes" name="recipes" required>
          <option></option>
          <option>1</option>
          <option>2</option>
        </select>
      </div>
    </div>
  </div>

  <div class="card" style="margin-top: 10px;" id="recipeDetailsDiv" hidden>
    <ul class="list-group list-group-flush">
      <div id="populateRecipeDetails">Recipe Details</div>
    </ul>
  </div>
</form>

I am trying to show the hidden div when someone changed the drop down box

I included jQuery CDN too. But it is not showing on change of drop down box. This could be a simple problem. But I cannot figure out how to solve. Can someone help?

Edit 1

I have the following codes included in the following order

<?php include "commonFiles/assignModal.php"; ?>

<?php include "../commonFilesForAll/jsLibraries.php"; ?>

jsLibraries.php contain CDN.

assignModal.php is the same HTML codes I showed above

Anu
  • 1,123
  • 2
  • 13
  • 42
  • Works fine for me. I'm guessing it's this problem. [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Phil Apr 06 '21 at 06:37
  • @Phil I tried the first two options mentioned. But not working. Still figuring out what is the problem – Anu Apr 06 '21 at 06:49
  • 1
    Please update your question to show where in the HTML you're including jQuery and your script. To others reading this, please don't combine the two code snippets as that possibly hides the problem – Phil Apr 06 '21 at 06:51
  • I am displaying it in the same order as how I used. First `HTML` then `CDN` and then ` – Anu Apr 06 '21 at 06:53
  • Please just update your question. Show the HTML document with all relevant elements and ` – Phil Apr 06 '21 at 06:55
  • As you can see in the stack snippet, your code now works (mostly) as expected. This is because the stack snippet places the JavaScript part at the end of the document. If in reality you're still having problems, please update the code in your question as previously asked. – Phil Apr 06 '21 at 07:04
  • View your HTML source code (in your browser, right-click the page and select _"View page source"_) and make sure it looks correct. Make sure there is only one `` document and that your tags appear in the right places – Phil Apr 06 '21 at 07:22
  • I couldn't find issues in the order or html elements and scripts. Thanks for the comments to help me so far. Question is closed and downvoted. So I try to use some other ways to lay out my page and visualize the concept – Anu Apr 06 '21 at 07:35

2 Answers2

1

Your code is working fine. So as @Phil's comment, you should show us the side effect rendering code. Because it may be this problem: Event handler not working on dynamic content

Besides, I would suggest enhancement your logic code.

There are 2 ways to resolve:

  1. Using toggle to handle the case empty select.
  2. If the selected item is diff empty then use show, else then use hide

$("#recipes").change(function() {
  const isToggle = $("#recipes").val() !== "";
  $("#recipeDetailsDiv").toggle(isToggle);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="recipes">Recipes</label>
        <select class="form-control" id="recipes" name="recipes" required>
          <option></option>
          <option >1</option>
          <option>2</option>
        </select>
      </div>
    </div>
  </div>

  <div class="card" style="margin-top: 10px;" id="recipeDetailsDiv" hidden>
    <ul class="list-group list-group-flush">
      <div id="populateRecipeDetails">Recipe Details</div>
    </ul>
  </div>
</form>
Nguyễn Văn Phong
  • 13,506
  • 17
  • 39
  • 56
0

If recipes are optional and empty option are selected, you only need show div when an option are selected.

$("#recipes").change(function() {
    $("#recipeDetailsDiv").show();
});

The show problem, you can refactor it for class. Creating a class which hides your div and use jQuery.removeClass().

Derek Ribeiro
  • 108
  • 1
  • 8