亲爱的我需要您的帮助! 我有两个可以正常工作的下拉列表。一个是ciudades,另一个是comunas,问题是我需要comunas列表依赖于ciudades,例如,当从列表中选择一个ciudad时,我会加载与所选ciudad的ID相关联的comunas。
这是我的代码!
<!-- language: lang-or-tag-here -->
<label>Ciudad:</label><select class="form-control" name="ciudad" required autocomplete="off">
<option value="">Seleccione</option>
<?php foreach($listaciudades as $ciudad):?>
<option value="<?= $ciudad['idciudad']?>"
<?php if ($ciudad == $ciudad['idciudad']) : ?> selected<?php endif; ?>
>
<?= $ciudad['nombre']?>
</option>
<?php endforeach; ?>
</select>
<p><label>Comuna:</label> <select id='comuna' name="comuna" autocomplete="off" required value="<?php echo $comuna; ?>"><?php echo form_error("comuna","<span class='help-block'>","</span>") ?>
<option value="">Seleccione</option>
<?php
foreach($listacomunas as $comuna)
{
echo '<option value="'.$comuna['idcomuna'].'">'.$comuna['nombre'].'</option>';
}
?>
</select>
答案 0 :(得分:0)
You can apply ajax to achieve the desired result.
Lets try this sample code
addemp.php ( my view page)
--------------------------
<head><script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<div class="col-sm-4">
<div class="form-group">
<label>Country <label>
<select class="select" id="selCountry" name="selCountry" onChange="getstate(this.value)" >
<option value="0">Select</option>
<?php if($con){ foreach($con as $val) { ?>
<option value="<?php echo $val['id']; ?>" <?php if(isset($country)){if($country==$val['id']) echo 'selected="selected"'; }else{echo set_select('selCountry', $val['id'], False);} ?> ><?php echo $val['con_name']; ?></option>
<?php }} ?>
</select>
<span style="color:red"><?php echo form_error('selCountry'); ?></span>
</div>
<div>
<div class="col-sm-4">
<div class="form-group">
<label>State/Province/Region<label>
<select class="select" id="selState" name="selState" onChange="getcity(this.value)">
<option value="0" selected="selected">Select</option>
</select>
<span style="color:red"><?php echo form_error('selState'); ?></span>
</div>
</div>
<script>
function getstate(id)
{
//alert('this id value :'+id);
$.ajax({
type: "POST",
url: '<?php echo base_url();?>index.php/employee/getState/'+id,
// data: id='country_id',
success: function(data){
//alert(data);
$('#selState').html(data);
},
});
}
</script>
<script type="text/javascript" src="<?php echo base_url();?>css_style/js/jquery-3.2.1.min.js"></script>
Employee.php(mycontroller)
-------------------------
public function getState($id)
{
$data['state'] = $this->Emp_model->getState($id);
$this->load->view('ajax_state_view',$data);
}
ajax_state_view.php ( my ajax view page)
---------------------------------------
<option value="0"> Select </option>
<?php if($state){ foreach($state as $val) { ?>
<option value="<?php echo $val['id']; ?>" ><?php echo $val['state_name']; ?></option>
<?php }} ?>
Emp_model.php ( my model page)
-------------------------------
public function getState($id) {
$where = array("country_id"=>$id);
this->db->select('*');
$this->db->from('state');
$this->db->where($where);
$query = $this->db->get();
//echo $this->db->last_query();exit;
return $query->result_array();
}