Question

我的代码似乎没有select2，但我想在其中应用select2，但代码不起作用。这是我的完整代码：

<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>

还有我要申请的链式选择代码：

<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>

当我将Select2放在class上时：没有任何反应，我认为问题在于更改功能，因为当我在第一次下拉列表中select2时，它可以使用select2传递第二个下拉列表，但是我无法传递第三个下拉列表，我应该如何编码呢？

Answer 1

有些事情可能有所帮助。特别是您在.city和.br <select>行中出现语法错误。 style没有关闭引用，这可能会使这些选择下拉列表无效。如果这不仅适用于.change()，请尝试$("#whatever").on("change", etc....)方法：

<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>

在旁注中，请不要再使用mysql_，而应使用mysqli_或PDO。不推荐使用mysql_库，并完全从最新版本的PHP中删除。

Select2无法链接下拉？

1 个答案: