选择2不能链接下拉列表
Select2 cannot Chained Dropdown?
我的代码似乎没有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中完全删除。
相关文章:
- 如何在ReactJs中链接下拉列表和文本区域
- 当链接单击-jQuery时,第二层下拉列表将隐藏
- 当按下链接以在不同页面上的表单中的下拉列表中设置值时
- 表单下拉选择链接
- 如何使用AngularJS链接下拉列表
- javascript下拉列表-无法添加链接
- 如何通过在Javascript中单击链接,用链接的值设置下拉列表值
- 如何通过单击链接为具有 URL 值的下拉列表设置值
- 链接下拉列表选择列表代码 -- 连接数据
- 如何创建共享单个列表的链接下拉列表,并确保只能在一个下拉列表中选择每个值
- 如何使用 MVC3 Razor 在 _layout.cshmtl 上创建悬停下拉操作链接
- 下拉列表中的链接选择不起作用的IE8 / 9打开下拉选择链接,警报有效
- 带链接的动态下拉列表
- jQuery - 单击链接时更改下拉列表的值
- 单击链接后关闭引导下拉列表
- 制作在新窗口中打开的下拉框链接
- 下拉菜单-链接不起作用
- Jquery/JS和CSS水平列表导航单击下拉超链接不工作
- 重叠的选项卡/下拉菜单-链接不起作用-CSS或JS问题
- Twitter Bootstrap下拉PHP链接未打开