How get dependent data using ajax in bootstrap multi-select in php?

Question

How to create a multi select dependant drop-down using bootsrap multi-select.

If we select state fill selected state city in city box

Below i mention my ajax code data will be get but not fill in city box.

ajax code

   $("#my_multi_select1").change(function () {
            var stateId = $("#my_multi_select1").val();
            $.ajax({
                type: 'POST',
                url: REQUEST_URL+'Territory/getMultiTerritorylist/',
                data:{state_id:stateId},
                beforeSend: function(){
                Metronic.blockUI({target: '', iconOnly: true});
                },
                error : function (xhr, textStatus, errorThrown) {
                    //other stuff
                },
                complete : function (){
                    Metronic.unblockUI('');
                },
                success: function (result) {  console.log(result);
                  // $("#my_multi_select2").empty();
                   //$('#TerritoryId').multiselect('destroy');


                    var prePopulate = JSON.parse(result);

                    $.each(prePopulate, function (i, territory) {console.log(i + ":" + territory)
                        $("#my_multi_select1").multiSelect(['1','2']);
                    });
                    /*$('#TerritoryId').multiselect({
                        enableFiltering: true,
                        enableCaseInsensitiveFiltering: true,
                        includeSelectAllOption: true,
                        buttonWidth: '400px',
                        maxHeight: 350, 
                        selectAllText: 'Select All Territory',
                        filterPlaceholder: 'Search by Territory Name',
                    });*/
                  }

            });
        });

Answer 1

you think you check value stateId .My example:

<select id="my_multi_select1">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
</select>
<script>
    var e = document.getElementById("my_multi_select1");
    var stateId  = e.options[e.selectedIndex].value; // GET VALUE DROP DOWN
</script>

Answer 2

Complete CakePHP Answer

First put JS and CSS in your cakeproject

CSS

1.bootstrap-multiselect.css

2.multi-select.css

JS

1. bootstrap-select.min.js

2. jquery.multi-select.js

---

View file code

<?php echo $this->Form->input("state_id", array('type' => 'select', 'options' => array($state), 'default' => $selected_state, 'id'=>'my_multi_select1', 'multiple'=>'multiple', 'class' => 'multi-select', 'label' => FALSE_VALUE,'div' => FALSE_VALUE)); ?>

<?php echo $this->Form->input("city_id", array('type' => 'select', 'options' => '', 'default' => '', 'id'=>'my_multi_select2', 'multiple'=>'multiple', 'class' => 'multi-select', 'label' => FALSE_VALUE,'div' => FALSE_VALUE)); ?>

Variable Suggestion:

$state => Get all state from controller

$selected_state => After add data it use for selected state data from database..

Add Script for multi-select-box

<script>
$('#my_multi_select1').multiSelect();
$('#my_multi_select2').multiSelect();
</script>

AJAX for multi-select-data

<script type="text/javascript">
  $(document).ready(function() {
   $("#my_multi_select1").change(function () {
            var stateId = $("#my_multi_select1").val();
            $.ajax({
                type: 'POST',
                url: 'http://loalhost/project/admin/City/getMultiCitylist/',
                data:{state_id:stateId},
                beforeSend: function(){

                },
                error : function (xhr, textStatus, errorThrown) {

                },
                complete : function (result){

                   //$selected_city => from controller after add data(this ajax for oth add and edit opration)

                    <?php if(isset($selected_city) && !empty($selected_city)) { ?>

                    $('#my_multi_select2').attr('disabled', false);


                    $("#my_multi_select2").empty();


                    var prePopulate = JSON.parse(result.responseText);

                    $.each(prePopulate, function (i, city) {
                      var new_id = i.split('_');
                      $("#my_multi_select2").append('<option value="' + i + '">' +
                            territory + '</option>');
                       });



                     <?php foreach ($selected_city as $key => $value) {
                        ?>
                      $("#my_multi_select2 option[value='<?php echo $value ?>']").prop('selected', 'selected').trigger('change');
                      <?php } ?>

                    $('#my_multi_select2').multiselect('refresh');
                    <?php } ?>
                },
                success: function (result) {  
                   $("#my_multi_select2").empty();                       


                    var prePopulate = JSON.parse(result);

                    $.each(prePopulate, function (i, territory) 
                        $("#my_multi_select2").append('<option value="' + i + '">' +
                            territory + '</option>');
                    });
                    $('#my_multi_select2').multiselect('refresh');


                  }

            });
        });       
});

// this ajax for trigger added data on edit mode
 <?php if(isset($selected_city) && count($selected_city) > 0) { ?>
<script>

   $(document).ready(function(){
      $.ajax({
         type: "POST",
         url: 'http://localhost/Project/admin/City/getMultiCitylist',
         data: $("#my_multi_select2").closest("form").serialize(),
         success: function(result) {
            $("#my_multi_select2").empty();
                   $("#my_multi_select2").empty();


                    var prePopulate = JSON.parse(result);

                    $.each(prePopulate, function (i, city) {
                        $("#my_multi_select2").append('<option value="' + i + '">' +
                            city + '</option>');
                    });

                    $('#my_multi_select2').multiselect('refresh');
        },
        beforeSend: function(){
            $('#my_multi_select2').attr('disabled', true);
        },
        error : function (xhr, textStatus, errorThrown) {
            //other stuff
        },
        complete : function (result){ 
                    $('#my_multi_select2').attr('disabled', false);


                    $("#my_multi_select2").empty();


                    var prePopulate = JSON.parse(result.responseText);

                    $.each(prePopulate, function (i, city) {
                      var new_id = i.split('_');
                      $("#my_multi_select2").append('<option value="' + i + '">' +
                            city + '</option>');
                       });



                     <?php foreach ($selected_city as $key => $value) {
                        ?>
                      $("#my_multi_select2 option[value='<?php echo $value ?>']").prop('selected', 'selected').trigger('change');
                      <?php } ?>

                    $('#my_multi_select2').multiselect('refresh');


        }
    });

 });

  </script>
  <?php } ?>

---

All code put in view file and get city by multiple state id and city is concatenation with state id like, 2_56 for single foreach.

Thank You