我有兩個(gè)可以正常工作的下拉列表。一個(gè)是ciudades，另一個(gè)是comunas，問(wèn)題是我需要comunas 列表依賴于ciudades，例如，當(dāng)從列表中選擇一個(gè)ciudad 時(shí)，我加載與所選ciudad 的id 關(guān)聯(lián)的comunas。這是我的代碼！ <!-- language: lang-or-tag-here --> <label>Ciudad:</label><select class="form-control" name="idCiudad" required autocomplete="off"> <option value="">Seleccione</option> <?php foreach($listaciudades as $ciudad):?> <option value="<?= $ciudad['idciudad']?>" <?php if ($idCiudad == $ciudad['idciudad']) : ?> selected<?php endif; ?> > <?= $ciudad['nombre']?> </option> <?php endforeach; ?></select> <label>Comuna:</label><select class="form-control" name="idComuna" required autocomplete="off"> <option value="">Seleccione</option> <?php foreach($listacomunas as $comuna):?> <option value="<?= $comuna['idcomuna']?>" <?php if ($idComuna == $comuna['idcomuna']) : ?> selected<?php endif; ?> > <?= $comuna['nombre']?> </option> <?php endforeach; ?></select>
2 回答
慕田峪7331174
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
我在這種情況下使用 ajax。
<select id="Firstclass" required>
<option value='1'>value1</option>
<option value='2'>value2</option>
</select>
<select id="Secondclass" required>
<option></option>
</select>
查詢代碼
$(document).on('change', '#Firstclass', function() {
var val= $(this).val();
$.ajax({
url: base_url+'Request/secondClass',
method: 'post',
data: {val: val},
dataType: 'json',
success: function(responseData) {
$('#Secondclass').empty();
$.each(responseData, function(i, p) {
$('#Secondclass').append($('<option></option>').val(p.val_ID).html(p.val_NAME));
});
},
});
});
服務(wù)器端
public function secondClass(){
$val=$this->input->post('val');
$secondClass=$this->RequestModel->getClass($val);
if($secondClass){
$secondClass=json_encode($secondClass);
print_r($secondClass);
}else {
echo 0 ;
}
一只名叫tom的貓
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊
你不能只用 CI 做到這一點(diǎn)，我們可以在 jquery ajax 的幫助下實(shí)現(xiàn)，
看法
<!-- language: lang-or-tag-here -->
<label>Ciudad:</label><select class="form-control" name="idCiudad" id="idCiudad" required autocomplete="off">
<option value="">Seleccione</option>
<?php foreach($listaciudades as $ciudad):?>
<option value="<?= $ciudad['idciudad']?>"
<?php if ($idCiudad == $ciudad['idciudad']) : ?> selected<?php endif; ?>
>
<?= $ciudad['nombre']?>
</option>
<?php endforeach; ?>
</select>
<label>Comuna:</label>
<select class="form-control" name="idComuna" id="idComuna" required autocomplete="off">
<option value="">Seleccione</option>
</select>
在您的控制器上創(chuàng)建一個(gè)新功能
<?php
class your_controller{
//other codes
public function ajax_communas(){
//your code to fetch comunas
$data = array();
$ciudades_id = $this->input->post('ciudades_id');
if($country_id){
$data = $this->model_name->function_name_to_get_cammuna_via_ciudades_id($ciudades_id);
}
echo json_encode($data);
}
在模型上
function function_name_to_get_cammuna_via_ciudades_id($id){
$this->db->select('table_name.id, table_name.name');
$this->db->where("parent_id",$id);
$query = $this->db->get();
$result = ($query->num_rows() > 0)?$query->result_array():FALSE;
return $result;
}
在您的視圖/js 文件中添加 jquery ajax 代碼
$('#idCiudad').on('change',function(){
var idCiudad = $(this).val();
if(idCiudad){
$.ajax({
type:'POST',
url:'<?php echo base_url('controller/ajax_communas'); ?>',
data:'ciudades_id='+idCiudad,
success:function(data){
$('#idComuna').html('<option value="">Selecionee</option>');
var dataObj = jQuery.parseJSON(data);
if(dataObj){
$(dataObj).each(function(){
var option = $('<option />');
option.attr('value', this.id).text(this.name);
$('#idComuna').append(option);
});
}else{
//incase no data
$('#idComuna').html('<option value="">Not available</option>');
}
}
});
}else{
$('#idComuna').html('<option value="">Selcionee(or select one)</option>');
}
});
- 2 回答
- 0 關(guān)注
- 149 瀏覽
添加回答
舉報(bào)
0/150
提交
取消