Bootstrap dropdown on change events

I only recently started using Bootstrap and am trying to have a dropdown such that when 10+ is clicked, a text box will appear instead of the dropdown that currently appears.

I also have a path to a URL that handles the other inputs but 10+. However, for some reason, it doesn't seem like my on change event function is ever called. I am not sure why.

Here is my code:

<script>
  $(document).ready(function () {
    $('.dropdown').on('change', function (e) {
      console.log("I GOT CALLED");
      // var element=document.getElementById('qtyText');
      // if(e.value==10)
      //   element.style.display='block';
      // else  
      //   element.style.display='none';
    });
  })
</script>

 <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="qtyDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    {{ tx.quantity }}
                    </button>
                    <div class="dropdown-menu" aria-labelledby="qtyDropdown">
                    <a class="dropdown-item" value=1 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=1%}">1</a>
                    <a class="dropdown-item" value=2 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=2%}">2</a>
                    <a class="dropdown-item" value=3 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=3%}">3</a>
                    <a class="dropdown-item" value=4 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=4%}">4</a>
                    <a class="dropdown-item" value=5 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=5%}">5</a>
                    <a class="dropdown-item" value=6 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=6%}">6</a>
                    <a class="dropdown-item" value=7 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=7%}">7</a>
                    <a class="dropdown-item" value=8 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=8%}">8</a>
                    <a class="dropdown-item" value=9 href="{% url 'EditQuantity' index=forloop.counter0 location='out' qty=9%}">9</a>
                    <a class="dropdown-item" value=10 >10+</a>
                    </div>
                  </div>
                  <input type="text" name="qtyText" id="qtyText" style='display:none'/>

Am I doing something wrong? I have also tried doing .change(function()) as well and have tried referring it as .dropdown-menu, #qtyDropdown, and various other names since I wasn't too sure which ID it should be referred to as. Thanks in advance.

Bootstrap dropdown on change events

0 Answers