2015-03-31 219 views
-1

我正在尝试使用jQuery在Codeigniter中创建动态下拉列表,但我对JQuery非常陌生,无法正常工作。用户首先必须选择地区,之后他必须从该地区的下拉菜单中选择。无法使用jQuery在CodeIgniter中创建动态依赖下拉列表

我的看法是:

<html> 
<head> 

    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script> 

    $('#school').hide(); 
$('#region').change(function(){ 
    var region = $('#region').val(); 
    if (region != ""){ 
     var post_url = "/index.php/home/register/" + region; 
     $.ajax({ 
      type: "POST", 
      url: post_url, 
      success: function(school) 
       { 
       $('#school').empty(); 
       $('#school').show(); 
        $.each(school,function(school_id,school) 
        { 
        var opt = $('<option />'); 
         opt.val(school_id); 
         opt.text(school); 
         $('#school').append(opt); 
       }); 
       } 
     }); 
    } else { 
     $('#school').empty(); 
     $('#school').hide(); 
    } 
}); 


    </script> 
    </head> 
<?php 
    echo "<body>"; 
    echo validation_errors(); 
    echo "<div class='container'>"; 
    echo form_open('home/register'); 

    echo "<h3>Register:</h3><br/>"; 
    echo "<table border = '0' >"; 
    echo "<tr><td> Username:* </td><td>"; 
    $data=array(
    'name' => 'username', 
    'class' => form_error('username') ? 'error' : '', 
    'value' => set_value('username') 
); 
    echo form_input($data); 
    echo "</td></tr>"; 
//come code register form -passwords and so on.. 
echo "<tr><td> Region:* </td><td>"; 
echo "<select name = 'region' id='region' >"; 
    foreach($regions as $row) 
    { 
    echo "<option value= '$row->region '>$row->region</option>"; 
    } 
    echo "</select>"; 


    echo "</td></tr>"; 

    echo "<tr><td> School:* </td><td>"; 

    echo "<select name = 'school' id='school'>"; 

    foreach($school_show as $row) 
    { 
    echo "<option value= '$row->school_name '>$row->school_name</option>"; 
    } 
    echo "</select>"; 

    echo "</td></tr>"; 
echo "<tr ><td> Class:* </td><td>"; 
    $options=array(
    '8' => '8', 
    '9' => '9', 
    'class' => form_error('class[]') ? 'error' : '' 
); 
    echo form_dropdown('class[]',$options); 
    echo "</td></tr>"; 

    echo "</table><br/>"; 
    $data=array(
    'class' => 'btn btn-success ', 
    'id' => 'reg', 
    'value' => 'Register' 
); 
    echo form_submit($data); 
    echo "</form>"; 
    echo "</div>"; 
    echo "</body>"; 
    echo "</html>"; 

我的控制器:

<?php 
class Home extends CI_Controller { 

    public function __construct() { 
     parent::__construct(); 

     $this->load->library('table'); 
     $this->load->library('session'); 
     $this->load->helper('url'); 
     $this->load->database(); 


    } 
public function register() 
    { 
if ($this->form_validation->run()==FALSE) 
     { 
      $this->signup(); 
     } 
     else 
     { 
      if($this->user_model->register()) 
      { 
       $data['dynamic_view'] = 'success_reg'; 
       $this->load->view('templates/main',$data); 
      } 
      else 
      { 
       $this->load->model('user_model'); 
       $data['dynamic_view'] = 'register_form'; 
       $data['regions'] = $this->user_model->regions_show(); 
       $data['school_show'] = $this->user_model->school_show(); 
       $this->load->view('templates/main',$data); 
      } 
     } 
} 

我的模式是:

public function regions_show() { 
     $this->db->select('region'); 
     $this->db->distinct('region'); 
     $this->db->from('schools'); 

     $result=$this->db->get(); 
       return $result->result(); 

    } 
    public function school_show() { 
     $this->db->select('school_name'); 

     $this->db->from('schools'); 

     $result=$this->db->get(); 
       return $result->result(); 

    } 
+0

jQuery的不 “CI中” *做任何事情*。 JavaScript(jQuery)不关心你的框架,PHP或任何服务器端代码。 JavaScript在浏览器中运行,所以重要的是浏览器源代码中呈现的内容。向我们展示呈现的HTML标记。 – Sparky 2015-03-31 23:42:40

+0

我的HTML标记位于JavaScript之后的视图中。 – 2015-04-01 06:57:38

+0

我认为我的评论足够清晰。视图中的HTML不是***“***呈现*** HTML标记”。渲染标记是浏览器源代码中的输出,不包含任何PHP。 – Sparky 2015-04-01 13:44:26

回答

0

下面是我的登记表的代码。

<html> 
 
<head> 
 
<title></title> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> 
 
    <link rel="stylesheet" href="http://www.redexperu.com/assets/js/bootstrap-progressbar/less/bootstrap-progressbar-3.2.0-3.x.x.less"> 
 
    
 
<link rel="stylesheet" type="text/css" href="http://localhost:9080/survey/css/css.css" /> 
 
<link rel="stylesheet" type="text/css" href="http://localhost:9080/survey/css/styles/layout.css" /> 
 

 
    </head> 
 
    <body> 
 
    <div id="container"> 
 

 
    <div id="header"> 
 
    <h1></h1> 
 
    <h4 id='header_title'><a href="http://localhost:9080/survey/index.php/home/logout">Излез</a></h4> 
 
     <h4 id='header_title'> 
 
    
 
    </h4> 
 

 
    <div id='nav'>   <a href="http://localhost:9080/survey/index.php/index/surveys_show">Анкети</a> 
 
        <a href="http://localhost:9080/survey/index.php/admin/surveys_manage">Управление на анкети</a> 
 
        <a href="http://localhost:9080/survey/index.php/index/results_show">Резултати</a> 
 
        <a href="http://localhost:9080/survey/index.php/chart/activity_chart">Диаграма</a> 
 
        <a href="http://localhost:9080/survey/index.php/index/student_results_show">Резултати на ученици</a> 
 
        <a href="http://localhost:9080/survey/index.php/coordinator/teachers_show">Добави учител</a> 
 
      </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
    </html> 
 

 

 

 
    
 

 
    <html> 
 
<head> 
 
    
 
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script type="text/javascript"> 
 
    /*function showHide(self, show){ 
 
     if (show) 
 
      $('.toggle').show(); 
 
     else 
 
      $('.toggle').hide(); 
 
     $(":radio").prop('checked',false); 
 
     $(self).prop('checked',true); 
 
    }*/ 
 
    </script> 
 
    <script> 
 
     
 
    $('#school').hide(); 
 
$('#region').change(function(){ 
 
    var region = $('#region').val(); 
 
    if (region != ""){ 
 
     var post_url = "/index.php/home/get_schools/" + region; 
 
     $.ajax({ 
 
      type: "POST", 
 
      url: post_url, 
 
      success: function(school) //we're calling the response json array 'cities' 
 
       { 
 
       $('#school').empty(); 
 
       $('#school').show(); 
 
        $.each(school,function(school_id,school) 
 
        { 
 
        var opt = $('<option />'); // here we're creating a new select option for each group 
 
         opt.val(school_id); 
 
         opt.text(school); 
 
         $('#school').append(opt); 
 
       }); 
 
       } 
 
     }); 
 
    } else { 
 
     $('#school').empty(); 
 
     $('#school').hide(); 
 
    } 
 
}); 
 

 

 
    </script> 
 
    <style> 
 

 
    form input { 
 
    width: 180px; 
 
    height: 30px; 
 
    } 
 

 
    </style> 
 
</head> 
 
<body><div class='container'><form action="http://localhost:9080/survey/index.php/home/register" method="post" accept-charset="utf-8"><h3>Регистрация:</h3><br/><table border = '0' ><tr><td> Потребителско име:* </td><td><input type="text" name="username" value="" class="" /></td></tr><tr><td> Парола:* </td><td><input type="password" name="password" value="" class="" /></td></tr><tr><td> Повтори парола:* </td><td><input type="password" name="password2" value="" class="" /></td></tr><tr><td> Име:* </td><td><input type="text" name="first_name" value="" class="" /></td></tr><tr><td> Фамилия:* </td><td><input type="text" name="last_name" value="" class="" /></td></tr><tr><td> Населено място:* </td><td><input type="text" name="location" value="" class="" /></td></tr><tr><td> Имейл:* </td><td><input type="text" name="email" value="" class="" /></td></tr><tr><td> Изберете роля:* </td><td><input type="radio" name="role_id[]" value="1" onClick="showHide(this, true)" /> Ученик <input type="radio" name="role_id[]" value="2" onClick="showHide(this, true)" /> Учител <input type="radio" name="role_id[]" value="5" onClick="showHide(this, false)" /> Координатор </td></tr><tr><td> Регион:* </td><td><select name = 'region[]' id='region' ><option value= 'Враца '>Враца</option><option value= 'София '>София</option></select></td></tr><tr><td> Училище:* </td><td><select name = 'school[]' id='school'><option value= 'ПМГ "Акад. Иван Ценов" '>ПМГ "Акад. Иван Ценов"</option><option value= 'СОУ "Христо Ботев" '>СОУ "Христо Ботев"</option><option value= 'ЕГ '>ЕГ</option><option value= 'ПМГ '>ПМГ</option></select></td></tr><tr ><td> Клас:* </td><td><select name="class[]"> 
 
<option value="8">8</option> 
 
<option value="9">9</option> 
 
<option value="class"></option> 
 
</select></td></tr></table><br/><input type="submit" name="" value="Регистрация" class="btn btn-success " id="reg" /></form></div></body></html>