使用cakephp多选下拉列表框代码

时间:2016-08-01 09:01:04

标签: javascript php ajax cakephp

我的表单中有两个相关的选择框用于选择国家/地区和州。

当我选择国家印度时,它应该填充其依赖状态。我的代码正常工作......

有点我想制作这个多选列表框。

前 - 如果我从县下拉列表中选择两个国家,则它会填充两个国家/地区的州......而不是单个选定国家/地区。

下面是我的代码......

HTML选择列表框代码

<?php
echo $this->Form->input('service_area_category_id', array(
    'id' => 'shipping_type',
    'required' => false,
    'multiple' => 'multiple',
    'type' => 'select',                                           
    'class' => 'form-control drop-arrow',
    'label' => false,
    'options' => $serviceCategory,
    'empty' => '--Select--'
));
?>

<?php
echo $this->Form->input('ship_category', array(
    'class' => 'form-control drop-arrow',
    'required' => false,
    'id' => 'state',
    'label' => false,
    'options' => '$states',
    'empty' => '--Select--'
));
?>  

控制器功能

public function getServiceArea(){     
    $this->loadModel('ServiceAreaCategory');        
    $serviceCategory = $this->ServiceAreaCategory->find('list', array(
        'conditions' => array(
            'is_active' => 1
        ),
        'fields' => array(
            'ServiceAreaCategory.id',
            'ServiceAreaCategory.name'
        ),
        'order' => 'name ASC'
    ));
    $this->set('serviceCategory', $serviceCategory);     
}


public function loadSkills() {
    $this->loadModel('Skill');
    $states = array();
    if (isset($this->request['data']['id'])) {
        $states = $this->Skill->find('list', array(
            'fields' => array(
                'Skill.id',
                'Skill.skill_name'
            ),
            'conditions' => array(
                'Skill.service_area_category_id' => $this->request['data']['id']
            )
        ));
    }            
    echo json_encode($states);
    exit();
}     

Ajax脚本

<script type="text/javascript">
    $(document).ready(function() {
        $("#shipping_type").on('change', function() {
            var id = $(this).val();           
            if (id) {
                var dataString = 'id=' + id;
                $.ajax({
                    type: "POST",
                    url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills")); ?>',
                    data: dataString,
                    dataType: 'JSON',
                    cache: false,
                    beforeSend: function() {
                        $('.spinicon').show();
                    },
                    complete: function() {
                        $('.spinicon').hide();
                    },
                   success: function(html) {
                        $("#loding1").hide();
                        $.each(html, function(key, value) {
                            $('<option>').val('').text('select');
                            $('<option>').val(key).text(value).appendTo($("#state"));
                        });
                        $('#state').selectpicker('refresh');
                    }
                });
            }
        });

    });
</script>

1 个答案:

答案 0 :(得分:0)

你的cakephp方面的功能

应该是

public function loadSkills() {

        $exploded_ids=explode(",",$this->request['data']['country_ids']);
        $ids= "IN ('".implode(",",$exploded_ids).")";
        $this->loadModel('Skill');
        $states = array();
        if (isset($this->request['data']['id'])) {
        $states = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
        'Skill.service_area_category_id '.$ids )));
        }            
        echo json_encode($states);
        exit();
}     

你的Javascript和AJAX代码应该是

<script type="text/javascript">
    $(document).ready(function() {
        $("#shipping_type").on('change', function() {
            var ids = $(this).val();           
            if (id) {

                $.ajax({
                    type: "POST",
                    url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills"),true); ?>',
                    data: {country_ids: ids}
                    dataType: 'JSON',
                    cache: false,
                    beforeSend: function() {
                        $('.spinicon').show();
                    },
                    complete: function() {
                        $('.spinicon').hide();
                    },
                   success: function(html) {
                        $("#loding1").hide();
                        $("#state").html("");
                        $.each(html, function(key, value) {
                            $('<option>').val('').text('select');
                            $('<option>').val(key).text(value).appendTo($("#state"));
                        });
                        $('#state').selectpicker('refresh');
                    }
                });
            }
        });

    });
</script>