show and hide select options don't work on modal

Question

I'm creating a website using flask, HTML, CSS, and Javascript.I would like to add a function that shows a hidden div when selecting a specific option(In this case, if users select '2' the hidden div is shown). However, this function doesn't work.
The first-page userssee
if select 1, show nothing
if select 3, show a hidden div. But it doesn't work

Please help it:( Thank you

  <style>

    .hidden{
        display: none;
    }

    .show{
        display: block;
    }


   </style>



  <div class="modal fade" id="modalupdate{{data.id}}" tabindex="-1"  aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
                <h4 class="modal-title">Update Information</h4>
            </div>
            <div class="modal-body">
                <form action="{{ url_for('update_ticket') }}" method="POST" id="update_form">
                    <select id="location">
                        <option value="val1">1</option>
                        <option value="val2">2</option>
                    </select>
                    <div class="hidden" id="val22">hello</div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
             </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $('#modalupdate{{data.id}}').on('hide.bs.modal', function() {
            $(this).find('#update_form').trigger('reset');
            $(this).find('#val22').trigger('reset');
        });

        $('select#location').on('change', function() {
            if ($(this).val() == "val2") {
                $("div#val22").removeClass("hidden");
                $("div#val22").addClass("show")
            } else {
                $("div#val22").removeClass("show");
                $("div#val22").addClass("hidden")
                
            }
        });
    });

   

    
    

 </script>
 

Answer 1

I am not a jQuery person, but it seems there is a lot of syntactical error in the code. It's the same with your "onChange" event and "Queryselector".

I have done the minimal changes in the syntax and get the result you want, you can definitely correct the rest of the code according to the standard that jQuery follows. -

here the corrected code [the onChange event for select#location querySelector]-

<script>
        $(document).ready(function() {
            let data = {
                id: 2
            };
            $(`#modalupdate${data.id}`).on('hide.bs.modal', function() {
                $(this).find('#update_form').trigger('reset');

            });

            $('select#location').on('change', function() {
                if ($(this).val() == "val2") {
                    $("div#val22").show();
                } else {
                    $("div#val22").hide();
                }
            });
        });
    </script>

Hope it helps.