我的数据库中有两个表:
1.动物类型2.品种
animal_type:
type_id | name
------------------------
1 | Dog
2 | Cat
3 | etc...
品种
ID | type_id | name
---------------------------
1 | 1 | Labrador
2 | 1 | Putbull
3 | 2 | Persian
etc.....
在我的首页上,我想显示选择下拉菜单,其中包括动物类型和根据动物类型选择的品种。
1.选择动物类型
<select id="animal_type">
<option value="<?php $type->id">Dog</option>
<option value="<?php $type->id">Cat</option>
</select>
2.如果用户选择类型不可显示,则根据类型选择品种列表
<!-- user select Dog type! fetch all dog breeds -->
<select id="breeds" disabled>
<option value="<?php $type->id">Labrador</option>
<option value="<?php $type->id">Pitbull</option>
</select>
所以我想根据选择的女巫类型从我的控制器加载所有品种。我试着用ajax来解决这个问题,但和他相处得并不好。我尝试了这个,但不知道如何添加新的选项来选择下拉列表。
脚本:
$(document).ready(function() {
// $("#breeds").attr('disabled', true);
// check if selected
if($("#animal_type").find('option:selected').val() == 0) {
$("#breeds").attr('disabled', true);
}
$('#animal_type').change(function(){
// get value of selected animal type
var selected_animal_type = $(this).find('option:selected').val();
$.ajax({
url : "url-to-site/index.php/account/getBreedsByTypeID/1",
type:'POST',
dataType: 'json',
success: function(response) {
$("#breeds").attr('disabled', false);
//alert(response); // show [object, Object]
var $select = $('#breeds');
$select.find('option').remove();
$.each(response,function(key, value)
{
$select.append('<option value=' + key + '>' + value + '</option>'); // return empty
});
}
});
});
});
JSON返回我的自定义品种名称
[{"breed_name":"Nema'u010dki prepeli'u010dar"},{"breed_name":"Irski vodeni 'u0161panijel"},{"breed_name":"Barbe (Barbet)"},{"breed_name":"Lagoto
My controller `mysite.com/index.php/account/getBreedsByTypeID/1`
此url返回以下编码的JSON
$breeds = $this->animal_breed->findAllBreedsByType($id); // Model @return array
return json_encode($breeds);
那么,我如何将该结果附加到基于类型的选择中呢?
你能举个例子来解决这个问题吗?谢谢
$.ajax({
url : "url-to-site/index.php/account/getBreedsByTypeID/1",
type:'POST',
dataType: 'json',
success: function(response) {
$("#breeds").attr('disabled', false);
$.each(response,function(key, value)
{
$("#breeds").append('<option value=' + key + '>' + value + '</option>');
});
}
});
$.ajax({
url : "url-to-site/index.php/account/getBreedsByTypeID/1",
data:{id:selected_animal_type},
type:'POST',
dataType: 'json',
success: function(response) {
$("#breeds").attr('disabled', false);
$.each(response,function(key, value)
{
$("#breeds").append('<option value=' + key + '>' + value.breed_name + '</option>');
});
}
});
$("#departmentId").change(function() {
console.log($("#departmentId").children("option:selected").val());
console.log(getAllOfficeByDepartmentId($("#departmentId").children("option:selected").val()));
});
function getAllOfficeByDepartmentId(id) {
$.ajax({
type: 'GET',
url: "getofficebydepartment/" + id,
dataType: 'json',
success: function (response) {
console.log(response);
$("#officeId").find('option').remove();
$("#officeId").append('<option value="-1" selected>Select Office Name</option>');
$.each(response, function (key, value) {
$("#officeId").append('<option value="'+ value.officeId+'">' + value.officeName+'</option>');
});
},
error: function (err) {
alert("Error" + err);
}
});
}
*与您的进行比较。