Jquery Append select onChange function in javascript

Question

Here Is My HTML Code

<div class="form-group col-md-12">
                    <label for="inputPassword4">Category</label>
                    <select name="cat" id="cat" class="form-control">
                        <option value=" ">Choose Category</option>
                        @foreach ($cat as $data)
                            <option value="{{ $data->id }}">{{ $data->cname }}</option>
                        @endforeach
                    </select>
                </div>
                <div id="serv"></div>
                <div id="repair"></div>

And Here is my javascript code and in this code first one was working fine that is #serv block but the second one that is #repair section its not working onChange so please help e with this.

<script>
        $('#cat').change(function() {
            if (this.value == 6 || this.value == 7) {
                $('#serv').append(`<div class="form-group col-md-12">
                        <label for="inputEmail4">Service</label>
                        <select class="form-control" id="servic" name="serv" required>
                            <option value=" ">Choose Services</option>
                            <option value="service">Service</option>
                            <option value="repair">Repair</option>
                            <option value="installation">Installation</option>
                            <option value="uninstallation">Uninstallation</option>
                        </select>
                    </div>`);
            }
            else
                $('#serv').empty();
        });

This below Block is not working please help me with it.

        $('#servic').change(function() {
            console.log('in');
            if (this.value == 'repair') {
                $('#repair').append(`<div class="form-group col-md-12">
                        <label for="inputEmail4">Repair</label>
                        <select class="form-control" id="repar" name="rep" required>
                            <option value="power_issue">Power Issue</option>
                            <option value="less_cooling">Less Cooling</option>
                            <option value="water_leakage">Water Leakage</option>
                        </select>
                    </div>`);
            }
            else
                $('#repair').empty();
        });
    </script>

You need to use a delegated event handler for the `change` event on `#servic`, as that element does not exist in the DOM when the page loads. See the duplicate I marked for more information and examples. — Rory McCrossan, Jun 07 '22 at 19:54

score 0 · Answer 1 · answered Jun 07 '22 at 19:37

at the first, when the page is loaded, you don't have an element with id "service" in the DOM. so your event will not be bound. you should put your second event into the first if condition. like this:

        $('#cat').change(function() {
            if (this.value == 6 || this.value == 7) {
                $('#serv').append(`<div class="form-group col-md-12">
                        <label for="inputEmail4">Service</label>
                        <select class="form-control" id="servic" name="serv" required>
                            <option value=" ">Choose Services</option>
                            <option value="service">Service</option>
                            <option value="repair">Repair</option>
                            <option value="installation">Installation</option>
                            <option value="uninstallation">Uninstallation</option>
                        </select>
                    </div>`);
                    $('#servic').change(function() {
            console.log('in');
            if (this.value == 'repair') {
                $('#repair').append(`<div class="form-group col-md-12">
                        <label for="inputEmail4">Repair</label>
                        <select class="form-control" id="repar" name="rep" required>
                            <option value="power_issue">Power Issue</option>
                            <option value="less_cooling">Less Cooling</option>
                            <option value="water_leakage">Water Leakage</option>
                        </select>
                    </div>`);
            }
            else
                $('#repair').empty();
        });
            }
            else
                $('#serv').empty();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-12">
                    <label for="inputPassword4">Category</label>
                    <select name="cat" id="cat" class="form-control">
                        <option value="">Choose Category</option>
                        <option value="6">value is 6</option>
                    </select>
                </div>
                <div id="serv"></div>
                <div id="repair"></div>

score -1 · Answer 2 · answered Jun 07 '22 at 19:32

You're creating the select with id "servic" dynamically, so you have to attach the change handler only after it's appended to #serv.

if (this.value == 6 || this.value == 7) {
    $('#serv').append(`...`);
    $('#servic').change(function() {
        // listener code...
    });
}

score -1 · Answer 3 · answered Jun 07 '22 at 19:45

$('#cat').change(function() {
            if (this.value == 6 || this.value == 7) {
                $('#serv').append(`<div class="form-group col-md-12">
                        <label for="inputEmail4">Service</label>
                        <select class="form-control" id="servic" name="serv" required>
                            <option value=" ">Choose Services</option>
                            <option value="service">Service</option>
                            <option value="repair">Repair</option>
                            <option value="installation">Installation</option>
                            <option value="uninstallation">Uninstallation</option>
                        </select>
                    </div>`);
$('#servic').change(function() {
            console.log('in');
            if (this.value == 'repair') {
                $('#repair').append(`<div class="form-group col-md-12">
                        <label for="inputEmail4">Repair</label>
                        <select class="form-control" id="repar" name="rep" required>
                            <option value="power_issue">Power Issue</option>
                            <option value="less_cooling">Less Cooling</option>
                            <option value="water_leakage">Water Leakage</option>
                        </select>
                    </div>`);
            }
            else
                $('#repair').empty();
        });

            }
            else
                $('#serv').empty();
        });

Jquery Append select onChange function in javascript

3 Answers3