首页>>表单>>jquery ajax 读取联动菜单 select菜单(2013-11-06)

jquery ajax 读取联动菜单 select菜单

jquery ajax 读取联动菜单 select菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function()  
  3. {  
  4. $(".country").change(function()  
  5. {  
  6. var id=$(this).val();  
  7. var dataString = 'id='+ id;  
  8.   
  9. $.ajax  
  10. ({  
  11. type: "POST",  
  12. url: "ajax.php",  
  13. data: dataString,  
  14. cache: false,  
  15. success: function(html)  
  16. {  
  17. $(".city").html(html);  
  18. }   
  19. });  
  20.   
  21. });  
  22. });  
  23. </script>  

 

XML/HTML Code
  1. <div style="margin:20px">  
  2. <label>大类:</label> <select name="country" class="country">  
  3. <option selected="selected">--Select--</option>  
  4. <?php  
  5. include('../../conn.php');  
  6. $sql=mysql_query("select * from bigclass");  
  7. while($row=mysql_fetch_array($sql))  
  8. {  
  9. $id=$row['bigclassid'];  
  10. $data=$row['bigclassname'];  
  11. echo '<option value="'.$id.'">'.$data.'</option>';  
  12.  } ?>  
  13. </select> <br/><br/>  
  14. <label>小类 :</label>   
  15. <select name="city" class="city">  
  16. <option selected="selected">--Select--</option>  
  17. </select>  
  18. </div>  

ajax.php

PHP Code
  1. <?php  
  2. include('conn.php');  
  3. if($_POST['id'])  
  4. {  
  5. $id=$_POST['id'];  
  6. $sql=mysql_query("select * from smallclass where bigclassid='$id'");  
  7.   
  8. while($row=mysql_fetch_array($sql))  
  9. {  
  10. $id=$row['smallclassid'];  
  11. $data=$row['smallclassname'];  
  12. echo '<option value="'.$id.'">'.$data.'</option>';  
  13.   
  14. }  
  15. }  
  16.   
  17. ?>  

 


原文地址:http://www.freejs.net/article_biaodan_100.html