Thursday, March 14, 2019

Using JS Chosen library for multiselect dropdown


JS Chosen library
https://harvesthq.github.io/chosen/

Example:
https://stackoverflow.com/questions/30190588/html-select-multiple-as-dropdown

JS and CSS used:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

Initialization
        $(".chosen-select").chosen({
          no_results_text: "Oops, nothing found!"
        })   

Set default value

        var str_array = "9999,90";
        var dataarray=str_array.split(",");       
        $("select[name='department1']").val(dataarray).trigger("chosen:updated");   


php post
 $.ajax({
        type: "POST",
            //$('select[name="Status"]').val() is cfp_appt_status
        data: {'department1': $('select[name="department1"]').val()},
        async: true,   
   
...........................
 Process data example:
        $pad_id = $this->input->post('department1');
        $con =1;
        foreach ($pad_id as $pad_id0)
            {
                    if($pad_id0=='9999') $con =0;
                    if($pad_id0==$entry['pad_id']) $con =0;
            }
            if($con==1) continue;