codeigniter中的动态选择选项

Question

我在codeigniter中创建了可靠的选择选项。填充第一个选项很容易，但我在显示第二个选项和第三个选项时有点麻烦。需要帮助

我的数据库包含：

在头表中： h_id，head fields， 小标题表 h_id，sh_id，子标题字段和 点数表 sh_id，points_name字段

控制器

class Mobile extends App_Controller {

    function __construct()
    {
        parent::__construct();
        $this->load->database();
        $this->load->helper(array('url','language','form'));
        $this->load->library('form_validation');
        $this->form_validation->set_error_delimiters('<p class="text-red">', '</p>');
        $this->lang->load('auth');
        $this->load->model('mobiles_model'); 

    }
    function index()
    {
        if (!$this->data['logged_in']) 
        {
            redirect('auth/login','refresh');
        }

        $rows = $this->mobiles_model->get_users_devices();
        if ($rows) 
        {
            $this->data['devices_list'] = $rows;    
         }
        $this->_render_page('trackall', $this->data);       
    }

function _render_page($view, $data=null, $render=false)
    {

        $this->viewdata = (empty($data)) ? $this->data: $data;

        $view_html = $this->load->view($view, $this->viewdata, $render);

        if (!$render) return $view_html;
    }
}

模态

public function get_users_devices()
            {   
                $this->db->select('A.h_id as id,A.head');
                $this->db->from($this->table_head.' as A'); 
                $query = $this->db->get();
            if ($query->num_rows() > 0) {
                return $query->result_array();
            }
            return FALSE;
            }

视图

<select id="head" name="head" class="form-control input-sm" onchange = "calljavascriptfunction();">
        <option value="default">--Select--</option>
        <?php if(isset($devices_list))
        foreach ($devices_list as $value) { ?>
          <option value="<?php echo $value['h_id'] ?>"><?php echo $value['head'] ?></option>
         <?php } ?>                                   
      </select>


      <select id="subhead" name="subhead" class="form-control input-sm">
        <option value="default">--Select--</option>    


      </select>

 <select id="points" name="points" class="form-control input-sm">
        <option value="default">--Select--</option>    


      </select>

我必须根据我选择的内容填充另一个。我尝试了几种方法，但没有一种方法有效。 感谢您的帮助，我真的陷入了困境。

Answer 1

假设您在HTML中加载了以下视图，并且需要根据第一个下拉列表#head获取值。

查看代码：

<select id="head">
    <option id="1"> Mobile </option>
    <option id="2"> Tabs </option>
    <option id="3"> Laptops </option>
</select>

<select id="subhead">
</select>

jquery ajax

$("#head").change(function(){

    var post_url = '<?php echo base_url() ?>mobile/getByDeviceId'
    $.ajax({
        type: "POST",
        url: post_url,
        data : { "hid" : $(this).val() },
        success: function(response){
            $.each(response, function(value, key) {
                $("#subhead").append("<option id="+value.modelId+">"+value.modelName+"</option>");
            })
        }
    });
});

控制器功能：

function getByDeviceId(){

    $hid = $this->input->post("hid");

    $modelList = $this->mobile_model->getByDeviceId($hid);

    echo(json_encode($modelList));
}

模型功能：

function getByDeviceId($hid){

    $this->db->select("modelId, modelName");
    $this->db->from("models");
    $this->db->where("hid", $hid);
    $query = $this->db->get();

    return $query->result();
}

Answer 2

使用jquery ajax()执行此操作，因为ajax()不会干扰当前页面状态并从服务器获取数据，您可以将其附加到下拉列表中。

ajax（）语法：

$.ajax({
        url: 'process.php',                        
        type: 'POST',                                  
        data: {
            var1  :val1,
            var2  :val2
        },
        success: function(response){    // response from process
            // do your stuff here
        }
    });