Select2无法链接下拉？

Question

My code seems to work without select2 but I want to apply select2 in it, but code don't work. this is my full code:

<script type="text/javascript">
$(document).ready(function() {
    $(".country").change(function() {
        var id=$(this).val();
        var dataString = 'id='+ id;
        $.ajax({
            type: "POST",
            url: "ajax_city.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $(".city").html(html);
            } 
        });
    });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(".city").change(function() {
        var id=$(this).val();
        var dataString = 'id='+ id;

        $.ajax({
            type: "POST",
            url: "ajax_city2.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $(".br").html(html);
            } 
        });
    });
});
</script>

And also the code for chained select that I want to apply with:

<div class="form-group">
    <label class="col-md-4 control-label">Pet Type</label>
    <div class="controls col-md-7 input-group">
        <select name="type"  class="input-sm form-control country" style="width: 100%;">
            <option selected="selected">--Select--</option>
            <?php
                    include('connect.php');
                    $sql=mysql_query("select * from pet_type");
                    while($row=mysql_fetch_array($sql)) {
                        $id=$row['pet_type_id'];
                        $data=$row['pet_type_name'];
                        echo '<option value="'.$id.'">'.$data.'</option>';
                    } ?>
        </select>
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Service</label>
    <div class="controls col-md-7 input-group">
        <select name="service_id" class="input-sm city form-control"  style="width: 100%;>
                    <option selected="selected">
            --Select--
            </option>
        </select>
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Branch</label>
    <div class="controls col-md-7 input-group">
        <select name="branch_id" class="input-sm br form-control"  style="width: 100%;>
                    <option selected="selected">
            --Select--
            </option>
        </select>
    </div>
</div>

When I put Select2 on the class:nothing happens, I think the problem is on the change function, because when I don't select2 on 1st dropdown it can pass on 2nd dropdown with select2, but then I cannot pass on the 3rd dropdown, how should I code it?

Answer 1

A couple things might help. One in particular which is you have a syntax error in your .city and .br <select> lines. The style has no close quote, which likely invalidates those selection dropdowns. If this doesn't work with just .change(), try the $("#whatever").on("change", etc....) method:

<script type="text/javascript">
// You can consolidate this in a function since both ajax calls are nearly identical
function AjaxCall(useObj,sendURL,sendTo)
    {
        $.ajax({
            url: sendURL,
            type: "POST",
            // I am making this a little differently than yours
            data: { id: useObj.val() },
            cache: false,
            success: function(response) {
                $(sendTo).html(response);
            } 
        });
    }

$(document).ready(function() {
    // I am using the id rather than the class to identify these
    $("#country_id").change(function() {
        AjaxCall($(this),"ajax_city.php","#service_id");
    });
    $("#service_id").change(function() {
        AjaxCall($(this),"ajax_city2.php","#branch_id");
    });
});
</script>

<div class="form-group">
    <label class="col-md-4 control-label">Pet Type</label>
    <div class="controls col-md-7 input-group">
        <!-- I added an id here: country_id -->
        <select id="country_id" name="type" class="input-sm form-control country" style="width: 100%;">
            <option selected="selected">--Select--</option>
            <?php
                    include('connect.php');
                    $sql=mysql_query("select * from pet_type");
                    while($row=mysql_fetch_array($sql)) {
                        $id=$row['pet_type_id'];
                        $data=$row['pet_type_name'];
                        echo '<option value="'.$id.'">'.$data.'</option>';
                    }
            ?>
        </select>
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Service</label>
    <div class="controls col-md-7 input-group">
        <!-- YOU ARE MISSING AN END QUOTE SO IT'S MESSING UP THE SELECT -->
        <!-- I added a same-as-name id here -->
        <select id="service_id" name="service_id" class="input-sm city form-control"  style="width: 100%;">
                    <option selected="selected">
            --Select--
            </option>
        </select>
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Branch</label>
    <div class="controls col-md-7 input-group">
        <!-- YOU ARE MISSING AN END QUOTE SO IT'S MESSING UP THE SELECT -->
        <!-- I added a same-as-name id here -->
        <select id="branch_id" name="branch_id" class="input-sm br form-control"  style="width: 100%;">
                    <option selected="selected">
            --Select--
            </option>
        </select>
    </div>
</div>

On a side note, don't use mysql_ anymore but rather mysqli_ or PDO. The mysql_ library is deprecated and removed entirely from the latest versions of PHP.