2015-04-02 56 views
0

我是新来的JQuery,我在我的代码中使用PHP。我不知道如何进行动态下拉。当用户从第一个下拉菜单选择区域时,接下来他会从另一个下拉菜单中选择 - 这个区域位于该区域。请帮忙! 我的代码是:如何使用jquery动态下拉

<html> 
 
<head> 
 
    
 
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script type="text/javascript"> 
 
     </script> 
 
    </head> 
 
    <body> 
 
    <?php 
 
    echo form_open(); 
 
    
 
    echo "<table border = '0' >"; 
 
    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 form_submit($data); 
 
    echo "</form>"; 
 
    echo "</table>";

控制器是:

<?php 
 
class Home extends CI_Controller { 
 
public function register() 
 
    { 
 
$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); 
 
      } 
 
}

型号是:

<?php 
 
class User_model extends CI_Model { 
 

 
    
 
    public function __construct() { 
 
     parent:: __construct(); 
 
     $this->load->database(); 
 
     $this->load->helper('array'); 
 
      
 
    } 
 
     
 
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

当用户在第一个下拉列表中选择一个区域,你想阅读使用'$该区域的名称(这一点).VAL()'。然后用ajax调用这个值来发送一个PHP文件,该文件将读取数据库中该区域的所有学校,并将列表发送回jQuery(通常以JSON格式)。然后,迭代这个json并构造/更新第二个下拉列表。有成千上万的关于这个的教程。 – 2015-04-02 09:57:32

+0

是的,这就是我想要的。我尝试了一些教程,但由于我不知道jQuery,我没有这样做。它没有工作。 – 2015-04-02 10:16:13

回答

1

使用与第一个下拉的OnChange属性一个Java脚本函数。因此,当选择第一个下拉值时,它会调用并将值传递给该函数,然后该函数将用于填充第二个下拉列表。

想法的一个简单的例子可以如下 -

function populateSecond(id) 
 
{ 
 
    if(id == 1){ 
 
    $('select[name=first]').append('<option value="a">A</option>');  
 
    }else{ 
 
    $('select[name=first]').append('<option value="b">B</option>');  
 
    } 
 
}
<select name="first" onChange="populateSecond(this.value);"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select> 
 

 
<select name="second"> 
 
</select>