我有一个包含三个下拉菜单的表单。第2个下拉列表的值根据第1个下拉列表填充,第3个下拉列表的值根据第2个下拉列表填充
因此,我能够根据值填充下拉列表并将其插入数据库中。
现在,我的问题是编辑表单时如何预先选择下拉列表值。
<form action="edit" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-4 form-group">
<label>Subject <span style="color:red;">*</span></label>
<select class="form-control" name="subject" id="subject" required>
<option value="">Select Subject Name</option>
<?php foreach($subjects as $sub):?>
<option value="<?php echo $sub['id']?>"><?php echo
ucwords($sub['subject_name']);?></option>
<?php endforeach;?>
</select>
</div>
<div class="col-md-4 form-group">
<label>Topic <span style="color:red;">*</span></label>
<select class="form-control" name="topic" id="topic" required>
<!-- using ajax to populate dropdown according to the
selection of subject -->
</select>
</div>
<div class="col-md-4 form-group">
<label>Co-Topic <span style="color:red;">*</span></label>
<select class="form-control" name="cotopic" id="cotopic"
required>
<!-- using ajax to populate dropdown according to the
selection of subject -->
</select>
</div>
</div>
</form>
<script>
$('#subject').on('change',function()
{
var subid=$(this).val();
$.ajax({
type:"POST",
url:"<?php echo site_url('AdminTopics/topicOnSubjects');?>",
data:{subid:subid},
success:function(res)
{
$("#topic").html(res);
console.log(res);
}
});
});
</script>
<script>
$('#topic').on('change',function()
{
var tid=$(this).val();
$.ajax({
type:"POST",
url:"<?php echo site_url('AdminCoTopics/coTopicOnTopics');?>",
data:{tid:tid},
success:function(res)
{
$("#cotopic").html(res);
console.log(res);
}
});
});
</script>
public function topicOnSubjects()
//this function is used in ajax on createCoTopic page to populate topic
based on selection of subject
{
$post=$this->input->post();
$result=$this->tm->getTopicBySubjects($post);
echo $result;
}
public function coTopicOnTopics()
//this function is used in ajax on createCoTopic page to populate topic
based on selection of subject
{
$post=$this->input->post();
$result=$this->tm->getCoTopicByTopic($post);
echo $result;
}
public function getTopicBySubjects($post)
{
$subid=$post['subid'];
$q=$this->db
->select('id,topic_name')
->from('topics')
->where('sub_id',$subid)
->get();
$row=$q->result();
$result='<option value="">Select Topic</option>';
foreach($row as $row)
{
$result .='<option value="'.$row->id.'">'.ucwords($row->topic_name).'</option>';
}
return $result;
}
public function getCoTopicByTopic($post)
{
$tid=$post['tid'];
$q=$this->db
->select('id,co_topic_name')
->from('cotopics')
->where('topic_id',$tid)
->get();
$row=$q->result();
$result='<option value="">Select Topic</option>';
foreach($row as $row)
{
$result .='<option value="'.$row->id.'">'.ucwords($row->co_topic_name).'</option>';
}
return $result;
}
<script>
$(document).ready(function(){
$('#subject').val("value from db").attr("selected","selected");
});
</script>
答案 0 :(得分:0)
也从模型中填充选择标签
public function getTopicBySubjects($post)
{
$subid=$post['subid'];
$q=$this->db
->select('id,topic_name')
->from('topics')
->where('sub_id',$subid)
->get();
$row=$q->result();
$result='<select class="form-control" name="topic" id="topic" required><option value="">Select Topic</option>';
foreach($row as $row)
{
$result .='<option value="'.$row->id.'">'.ucwords($row->topic_name).'</option>';
}
$result .='</select>';
return $result;
}
HTML
<div class="col-md-4 form-group">
<label>Co-Topic <span style="color:red;">*</span></label>
<div id="dynSel"></div>
<!-- remove your select from here
<select class="form-control" name="cotopic" id="cotopic"
required>
</select>-->
</div>
在您的 AJAX
中$("#dynSel").html(res)
答案 1 :(得分:0)
@denny,您还必须获得有关编辑的主题。但是只获取特定数据。
请这种方式...
在控制器中
public function edit($itemId = ''){
/** here you have the primary Id of item */
/** Get item details by item id*/
$data['itemDetails'] = $this->model->function($itemId);
/** get all subjects */
$data['subjects'] = $this->model->function();
/** get all topics of selected subject */
$data['topics'] = $this->model->function($data['itemDetails']['subject']);
/** get all cotopics of selected topic */
$data['cotopics'] = $this->model->function($data['itemDetails']['topic']);
/** Send this data to view */
}
可见
<form action="edit" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-4 form-group">
<label>Subject <span style="color:red;">*</span></label>
<select class="form-control" name="subject" id="subject" required>
<option value="">Select Subject Name</option>
<?php foreach ($subjects as $sub): ?>
<option <?php if($itemDetails['subject'] == $sub['id']){ echo 'selected'; } ?> value="<?php echo $sub['id'] ?>"><?php echo
ucwords($sub['subject_name']);
?></option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4 form-group">
<label>Topic <span style="color:red;">*</span></label>
<select class="form-control" name="topic" id="topic" required>
<!-- using ajax to populate dropdown according to the
selection of subject -->
<option value="">Select Topic</option>
<?php foreach ($topics as $topic): ?>
<option <?php if($itemDetails['topic'] == $topic['id']){ echo 'selected'; } ?> value="<?php echo $topic['id'] ?>"><?php echo
ucwords($topic['topic_name']);
?></option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4 form-group">
<label>Co-Topic <span style="color:red;">*</span></label>
<select class="form-control" name="cotopic" id="cotopic"
required>
<!-- using ajax to populate dropdown according to the
selection of subject -->
<option value="">Select Cotopic</option>
<?php foreach ($cotopics as $cotopic): ?>
<option <?php if($itemDetails['cotopic'] == $cotopic['id']){ echo 'selected'; } ?> value="<?php echo $cotopic['id'] ?>"><?php echo
ucwords($cotopic['cotopic_name']);
?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</form>
当您更改任何下拉列表时,它将在您的ajax调用中起作用。 如果您有任何疑问,请告诉我。