如何使用 ajax in bootstrap multi-select in php 获取依赖数据？

Question

如何使用 bootsrap multi-select.

创建一个多 select 依赖的下拉列表

如果我们 select state fill selected state city in city box

下面我提到我的 ajax 代码数据将被获取但不会填写城市框。

ajax代码

   $("#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

你认为你检查值 stateId 。我的例子：

<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

完整的 CakePHP 答案

先把JS和CSS放到你的cakeproject

CSS

1.bootstrap-multiselect.css

2.multi-select.css

JS

bootstrap-select.min.js
jquery.multi-select.js

查看文件代码

<?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)); ?>

变量建议：

$state => 从控制器获取所有状态

$selected_state => 添加数据后，它用于 selected 数据库中的状态数据..

为 multi-select-box

添加脚本

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

AJAX 用于多select-数据

<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 } ?>

所有代码都放在视图文件中并通过多个状态 ID 获取城市，城市与状态 ID 连接，如 2_56 用于单个 foreach。

谢谢

如何使用 ajax in bootstrap multi-select in php 获取依赖数据？

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

php

ajax

jquery

multi-select

bootstrap-4