我不明白如何根据我在第一次选择时做出的选择来填充第二个选择。
我想要做的是添加一个位置。要添加位置,我的第一个select
有options
:大陆,国家,地区和城市。并且,例如,如果我select
城市类型,我想在我的第二个选择中仅显示我可以连接城市的区域。如果我选择了一个国家,那么我希望第二个选择只向我显示大陆。
<p><label for="type_id">Tip de locatie:</label><br />
<select class="styled" name="type_id" id="type_id">
<option value="0">Alege...</option>
<?php
foreach ($place_type as $key => $type) { ?>
<option value="<?=$type['id']?>"><?=$type['name']?></option>
<?php } ?>
</select>
</p>
<noscript>
<input type="submit" name="action" value="Load Parents" />
</noscript>
<p><label for="parent_id">Leaga de:</label> <br />
<select class="styled" name="parent_id" id="parent_id">
<option value="0">Alege...</option>
<?php
foreach ($places as $key => $place) { ?>
<option value="<?=$place['id']?>"><?=$place['name']?></option>
<?php } ?>
</select>
</p>
我正在使用codeigniter框架,我在控制器中有这个方法:
public function get_place_parent()
{
$this->load->model('places_model');
$places = $this->places_model->get_places();
$places = json_encode($places);
return $places;
}
和jQuery
<script type="text/javascript" charset="utf-8">
$(function(){
$("select#type_id").change(function(){
$.getJSON("<?=site_url('admin/get_place_parent')?>",{type_id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + i + '">' + j[i] + '</option>';
}
$("select#parent_id").html(options);
})
})
})
</script>
我真的不明白怎么做。它基于本教程:http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
提前谢谢!
答案 0 :(得分:1)
以下是我的某个应用程序的片段,它完全符合您的要求。
companyNames是第一个下拉列表的ID,即我们注册的公司列表。当更改时,它会对admin / getAddresses函数进行ajax调用,并从companyNames下拉列表中发送id。我也包含了控制器功能,你可以找出与你的应用程序无关的模型。
然后控制器返回一个json响应,其中第二个下拉列表的数据由ajax cotnrol中的success函数填充。首先它删除已存在的任何选项(否则每次更改第一个下拉列表时都会继续追加)然后它会从控制器返回的json中附加新选项。
查看
$(document).on("change", "#companyNames", function() {
$row = $(this).closest('tr');
$.ajax({
type: "GET",
url: "<?=base_url()?>admin/getAddresses/",
data: $row.find('input,select').serialize(),
dataType: "json",
success: function(content) {
if (content.status == "success") {
$("#companyAddresses").find('option').remove();
$.each(content.message, function(key, val) {
$("#companyAddresses").append(
'<option value="' + key + '">' + val + '</option>'
);
});
} else {
$("#error").html('<p>'+content.message+'</p>');
}
}
});
return false;
});
<强>控制器强>
public function getAddresses()
{
$data = $this->input->getArray();
$this->load->model('companies');
$data['companyAddresses']=$this->companies->getCompanyAddresses($data['addCompany']);
print json_encode(array("status"=>"success", "message"=>$data['companyAddresses']));
}
答案 1 :(得分:0)
请按以下步骤操作
1)当您从选择框中选择城市类型时,您需要在其onChange事件中进行一次Ajax调用。
2)将所选城市的id传递给控制器功能。
3)从DB或任何地方获取城市的区域。
4)然后你可以在控制器函数本身构建你的选项,或者你可以将它传递给Ajax函数并在那里构建你的选项。
5)在区域选择框中添加构造的选项。