javascript - 如何在 codeigniter 中创建依赖下拉菜单

标签 javascript php jquery codeigniter

我想应用取决于州和城市的下拉菜单。我的问题是,当我选择州时,城市下拉列表不显示任何值。

我的数据库在这里(状态表)

id 州名 1 议员 2 起

id 州索引 城市名称 1 1 博帕尔 2 1 印多尔 3 2 帕特纳

我的 Controller 在这里(main_controller)

    <?php
class Main_controller extends CI_Controller {

function index()
{
    $this->load->model('model_form');
    $this->data['states'] = $this->model_form->get_state();
    $this->load->view('view_form_all',$this->data);

}

function get_cities($state){

        $this->load->model('Model_form','', TRUE);    
        header('Content-Type: application/x-json; charset=utf-8');
        echo(json_encode($this->Model_form->get_cities_by_state($state)));
    } 
}

我的模型是(main_form.php)

 <?php
class Model_form extends CI_Model
{
      function __construct()
    {
            // Call the Model constructor
            parent::__construct();
    }

    function get_state(){
        $query = $this->db->query('SELECT id, state_name FROM state');
        return $query->result();
    }


    function get_cities_by_state ($state, $tree = null){
        $this->db->select('id, city_name');

        if($tree != NULL){
            $this->db->where('state_index', $state);
        }

        $query = $this->db->get('cities');
        $cities = array();

        if($query->result()){
            foreach ($query->result() as $city) {
                $cities[$city->id] = $city->city_name;
            }
            return $cities;
        } else {
            return FALSE;
        }
    } 


} 

我的观点是(view_from_all.php)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$('#f_city, #f_city_label').hide();

$('#f_state').change(function(){
    alert('f_state');
    var state_id = $('#f_state').val(); 
        if (state_id != ""){
        var post_url = "<?php echo base_url();?>index.php/main_controller/get_cities/" + state_id;
        $.ajax({
            type: "POST",
             url: post_url,
             success: function(cities) //we're calling the response json array 'cities'
              {
                $('#f_city').empty();
                $('#f_city, #f_city_label').show();
                   $.each(cities,function(id,city) 
                   {
                    var opt = $('<option />'); // here we're creating a new select option for each group
                      opt.val(id);
                      opt.text(city);
                      $('#f_city').append(opt); 
                });
               } //end success
         }); //end AJAX
    } else {
        $('#f_city').empty();
        $('#f_city, #f_city_label').hide();
    }//end if
}); //end change 
</script>
</head>

<body>
<?php echo form_open('main_controller/add_all'); ?>
        <label for="f_state">State<span class="red">*</span></label>
        <select id="f_state" name="f_state">
            <option value="">select any state</option>
            <?php
            foreach($states as $state){
                echo '<option value="' . $state->id . '">' . $state->state_name . '</option>';
            }
            ?>
        </select>
        <label for="f_city">City<span class="red">*</span></label>
        <!--this will be filled based on the tree selection above-->
        <select id="f_city" name="f_city" id="f_city_label"> 
            <option value=""></option>
        </select>
        <label for="f_membername">Member Name<span class="red">*</span></label>
        <!--<input type="text" name="f_membername"/>-->
<?php echo form_close(); ?> 

</body>

</html>

最佳答案

尝试 GET 而不是 POST,因为如果您激活了 CSRF 保护,您在发送请求时会遇到问题,提示您的 token 丢失,因此只需更改此即可:

$.ajax({
   type: "POST",

对此:

$.ajax({
   type: "GET",

其他有趣的改变:

header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->Model_form->get_cities_by_state($state)));

至:

 $result = $this->Model_form->get_cities_by_state($state);
 return $this->output->set_content_type('application/json')
                    ->set_output(json_encode($result));

关于javascript - 如何在 codeigniter 中创建依赖下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27654112/

相关文章:

javascript - toFixed 不是一个函数吗?

Javascript 将 html 标签的颜色设置回默认颜色而不是假设颜色为黑色

php - 在 MySQL 中计算今天日期的 SUM #Parse 错误

javascript - <embed> javascript代码的最佳做法

javascript - 有没有办法将一张图片分布在可折叠的 div 及其父 div 中?

Jquery动态更改flashparam属性(config = {"playlist": ["url"] :"http://localhost/test.flv"}) of an embed tag

javascript - 在网页上的列中放置的 2 个选项卡之间切换,而无需更改其余页面元素

javascript - 分别针对相同类的多个实例

php - 我如何在提交时显示错误并在页面上保留 DIV(特殊框)

php - 使用 PHP 保护网页的密码