我的代码似乎没有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，但然后我不能通过第三个下拉框，我该如何编码?
以下几点可能会有所帮助。特别是在.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中完全删除。