Как заполнить выпадающие значения в соответствии со значениями MySQL

Question

У меня есть форма с тремя выпадающими списками.Значение второго раскрывающегося списка заполняется в соответствии с первым раскрывающимся списком, а значение третьего раскрывающегося списка - в соответствии со вторым раскрывающимся списком

Таким образом, я могу заполнить раскрывающиеся списки в соответствии со значениями и вставить их в базу данных.

Теперь моя проблема заключается в том, как предварительно выбрать значения раскрывающегося списка при редактировании формы.

Вот моя форма:

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

controller

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>

Answer 1

@ 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-вызова. Если у вас есть какие-либо вопросы, дайте мне знать.

Answer 2

Заполните тег выбора также из вашей модели

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)