如何根据mysql值填充下拉值

时间:2019-06-25 05:49:31

标签: jquery codeigniter

我有一个包含三个下拉菜单的表单。第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>

要填充的jquery:

<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>

2 个答案:

答案 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调用中起作用。 如果您有任何疑问,请告诉我。