使用ajax和codeigniter在多选下拉列表中显示所选选项

时间:2019-10-14 07:03:20

标签: javascript php ajax

我需要使用ajax在多选下拉列表中显示选定的选项(已经从数据库保存的选项)。

ajax的响应是这样的

{"skill":[{"skill":"css"},{"skill":"Laravel"}]}

我需要显示下拉列表中选择的这些值。

我的javascript ajax函数

$.ajax({
            url: "<?php echo base_url(); ?>recruiter/fetch_user_skill",
            method: "POST",
            data: {userid: user_id},
            success: function (response) {

                var JSONObject = JSON.parse(response);
                alert(response);
            }
        });

php脚本

模型

function fetch_users_skill($user)
{
    $query = $this->db->query("SELECT `skill` FROM `user_skills` WHERE user_id='$user'");

    if($query->num_rows()>0) {
        foreach($query ->result() as $row)
        {
            $data[] = $row;
        }
        return $data;
    }
}

控制器

public function fetch_user_skill()
{
    $user_id = $_POST['userid'];
    $this->load->model('recruiter_model');
    $data["skill"] = $this->recruiter_model->fetch_users_skill($user_id);
    echo json_encode($data);
}

视图

<select class="form-control" id="skill" name="skills[]" multiple="multiple" name="skills" style="width: 600px !important;">
                    <option value="">--Select Name---</option>
                    <?php
                    if ($skills->num_rows() > 0) {
                        foreach ($skills->result() as $skills_row) {
                            ?>
                            <option value="<?php echo $skills_row->skill; ?>"><?php echo $skills_row->skill; ?></option>
                            <?php
                        }
                    }
                    ?>

                </select>

如何将这些值设置为从js中选择的值。 预先感谢。

2 个答案:

答案 0 :(得分:0)

您可以使用以下代码:

$.ajax({
        url: "<?php echo base_url(); ?>recruiter/fetch_user_skill",
        method: "POST",
        data: {userid: user_id},
        success: function (response) {

            var JSONObject = JSON.parse(response);
            Array.prototype.forEach.call(JSONObject.skill, function(v){
                $('#skill option[value=' + v.skill + ']').attr('selected', 'selected');
            });
        }
    });

答案 1 :(得分:0)

使用此

    $.ajax({
        url: "<?php echo base_url(); ?>recruiter/fetch_user_skill",
        method: "POST",
        data: {userid: user_id},
        success: function (response) {

            var JSONObject = JSON.parse(response);

            JsonObject.skill.forEach(function(sk){
                 $('#skill option[value=' + sk.skill + ']')
                      .prop('selected', true);
            })
        }
    });