在一个表单form中使用.ajax 做一个select二级联动, 第二个select可以成功获取到ajax返回来的数据, 但这时需要用表单按钮提交整个表单数据时, 按钮没有反应了. 这是怎么回事?
代码
<script>
$(document).ready(function(){
$('#subject').change(function(){
var objectModel = {};
var value = $(this).val();
var type = $(this).attr('id');
objectModel[type] =value;
$.ajax({
cache:false,
type:"POST",
url: "URL",
dataType:"json",
data:objectModel,
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
},
success:function(data){
$("#category").empty();
var count = data.length;
var i = 0;
var b="<option>请选择</option>";
for(i=0;i<count;i++){
b+="<option value='"+data[i].id+"'>"+data[i].category+"</option>";
}
$("#category").append(b);
}
});
});
});
</script>
HTML
<form action="/admin/blogs/create" method="post">
{:token()}
<p class="form-group form-group-sm form-inline">
<label for="title" class="control-label">标题</label>
<input type="text" class="form-control" style="width: 400px;" id="title" name="title" required="required">
</p>
<p class="form-group form-group-sm form-inline">
<label for="subject"> 板块</label>
<select class="form-control" style="width: 200px;" id="subject" name="subject">
<option>请选择板块</option>
<!-- 这里是后台数据 -->
</select>
</p>
<p class="form-group form-group-sm form-inline">
<label for="category">子类</label>
<select class="form-control" style="width: 200px;" id="category" name="category">
<option>请选择</option>
<!-- 这里需要获取ajax数据 -->:w
</select>
</p>
<p class="form-group">
<label for="content">内容</label>
<textarea id="content" name="content" class="form-control" required="required" rows="12"></textarea>
</p>
<button type="submit" class="btn btn-success">新增</button>
</form>
