Question

我需要先选择source_type，然后根据location

自动填充source_type

查看文件

    <select name="source_type" id="source_type">
       <option value="">Source Type</option>
       <option value="Internal">Internal</option>
       <option value="External">External</option>
    </select>

    <select name="location" id="location">
       <option value="">Select</option>
    </select>

    $('#source_type').change(function(){
        $.ajax({
            type: 'post',
            data: 'source_type'+$(this).val(),
            url: 'get_sources_location',
            success: function(data) {
                $('#source_location').val(data);
            }
        });
    });

..控制器

    public function get_sources_location()
    {
        $source_type = $this->input->post('source_type');

        $this->load->model('documents_model');
        $results = $this->documents_model->get_locations();
        echo $results;
    }

..模型

    public function get_locations()
    {
     $query = $this
                ->db
                ->select('location')
                ->where('classification', $source_type = $this->input->post('source_type'))
                ->get('sources_location');

     $data = array();

     foreach ($query->result() as $row)
     {
         $data = $row->location;
     }
     return $data;
   }

Answer 1

尝试这样的事情

HTML CODE

<select name="source_type" id="source_type" onchange="populateLocation(this.value)">
   <option value="">Source Type</option>
   <option value="Internal">Internal</option>
   <option value="External">External</option>
</select>

<select name="location" id="location">
   <option value="">Select</option>
</select>

使用JQUERY的JAVASCRIPT代码

function populateLocation(source_type_value){
            if(source_type_value !=''){
                /*
                    Pass your source type value to controller function which will return you json for your
                    loaction dropdown
                */
                var url = 'controller/function/'+ source_type_value; // 
                $.get(url, function(data) {
                 var $select = $('location');
                 // removing all previously filled option
                 $select.empty();
                 for (var propt in data) {
                        $select.append($('<option />', {
                            value: propt,
                            text: data[propt]
                        }));
                 }

            }
        }

从控制器返回的

JSON FORMAT

{"":"Select","1":"New york","2":"London","3":"Mumbai"}

Answer 2

像这样放一个AJAX函数，

$("#source_type").change(function(){

  $.ajax({
     type : 'POST',
     data : 'source_id='+ $(this).val(),
     url : 'controller/method',
     success : function(data){
                 $('#location').val(data);
     }
 });
});

在控制器中，设置一个方法来获取值，

public function getLocations() {

     $source_id = $this->input->post('source_id');

     // Call the model function and get all the locations based on the source type id

     // Populate the dropdown options here

     echo $result;
}

Answer 3

将change事件处理程序附加到您的第一个DD，并向服务器发送ajax调用以获取数据。在成功回调的ajax调用中填充第二个DD。以下是一个简单的概念证明

$("#source_type").change(function(e)
{
    $.ajax({
        url:'/echo/json',
        success:function(data){
            console.log("success");
            $("<option/>",{text:'google',value:'google'}).appendTo("#location");
        }
    });

DEMO

使用CodeIgniter根据第一个下拉列表填充第二个下拉列表

3 个答案: