Tukukkk

I have Customer Textfield, that contains customer Name. And then, i also have Project Textfield contains project name from customer. I want to make depending dropdown from multi select customer.
For example, user select : btel, celc, from the Customer Textfield, it just appear in Project Text field from btel and celc.
This is my JS:

<script type="text/javascript">

  $('.filter_user_customer').select2();

        $(document).ready(function(){

        $('input[name="daterange"]').daterangepicker({

            opens: 'left',

            drops: 'up'

          }, function(start, end, label) {

              console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));

          }); 

        // key category select box

        var $category     = $('select#categoryField');

        // customer select box

        var $customer   = $('select#customerField');

        // project select box

        var $projects   = $('select#projectField');

        // on change user role, get projects

        var $role       = $('select#roleField');

        // on change user id, get projects

        var $userid     = $('select#useridField');

        // on change combiner

        var $combiner   = $('combinerField');



        $customer.on('change', function () {

            // get selected customer name

            var customer = $(this).find('option:selected').val();

            console.log(customer);

            // post data with CSRF token

            var data = {

                action:'project',

                customer: customer,

                "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"

            };

            // AjaxPOST to get projects

            $.post('<?php echo base_url(); ?>Dashboard/perfomance_monitoring', data, function(json) {

                projects_data = '<option value="0">All</option>';

                $.each(json, function(index, obj){

                    projects_data += '<option value="'+obj.project_id+'">'+obj.project_id+'</option>';

                });

                // append all projects in project dropdown

                $projects.html(projects_data);

            }, 'JSON');

        });



        // on change user role, get project

        $projects.on('change', function () {

            // get selected project name

            var project = $(this).find('option:selected').val();

            // AjaxPOSt wit CSRF

            var data = {

                action:'role',

                project: project,

                "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"

            };

            $.post('<?php echo base_url(); ?>Dashboard/perfomance_monitoring', data, function(json) {

                role_data = '<option value="0">All</option>';

                $.each(json, function(index, obj){

                    role_data += '<option value="'+obj.user_owner+'">'+obj.user_owner+'</option>';

                });

                // append all role data in Role dropdown

                $role.html(role_data);

            }, 'JSON');

        });



        // on change user ID, get project

        $projects.on('change', function () {

            // get selected project name

            var project = $(this).find('option:selected').val();

            // AjaxPOSt wit CSRF

            var data = {

                action:'userid',

                project: project,

                "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"

            };

            $.post('<?php echo base_url(); ?>Dashboard/perfomance_monitoring', data, function(json) {

                userid_data = '<option value="0">All</option>';

                $.each(json, function(index, obj){

                    userid_data += '<option value="'+obj.user_id+'">'+obj.user_id+'</option>';

                });

                // append all role data in Role dropdown

                $userid.html(userid_data);

            }, 'JSON');

        });

    });



</script>

This is my Controller:

$array_data = array();

        // only on Ajax Request

        if ($this->input->is_ajax_request()) {

            // if request for projects

            if ($this->input->post('action') && $this->input->post('action') == 'project') {

                // get customer name

                $customer     = $this->input->post('customer', true);

                // get project data by customer name

                $array_data = $this->ixt_models->fetch_project(trim($customer), 'project');

                // AjaxPOST JSON response

                echo json_encode($array_data);die();

            }

This is my Model:

public function fetch_project($where_data = null, $type = null)

{

     $query = '';



    // customer only

    if (is_null($type) && is_null($where_data)) {

        // desire column from table

        $this->db->select('cust_id');

        // only unique customer

        $this->db->distinct('cust_id');

        // mysql table

        $query = $this->db->get($this->table_helper);

    }



    // projects by customer

    elseif ($type == 'project' && !is_null($where_data)) {

        // desire column from table

        $this->db->select('project_id');

        // where clause

        $this->db->where('cust_id', $where_data);

        // mysql table

        $query = $this->db->get($this->table_helper);

    }

Right now, Project Textfield only show one choice when Customer take more than one selection :
Click here

You can try this code.

JavaScript code:

function onchangeFunctionName(id) {

    if (id == '') {

        $('#SelectedId').prop('disable', true);

    } else {

        $('#SelectedId').prop('disable', false);

        $.ajax({

            url: base_url + '/Url here get value by selected value',

            type: "GET",

            data: {'id': id},

            dataType: 'json',

            async: false,

            success: function(data) {

                $.each(data, function(key, value) {

                    $('#IdNameWhereShowValue').append('<option ' ' value="' + value.valueId + '">' + value.ValueName + '</option>');

                });

            },

            error: function() {

            }

        });

    }

}

Controller code:

$array_data = $this->ModelName->MethodName(PassIdhere passed by the js code);



echo json_encode(array_data);