Ajax获取php返回json数据动态生成select下拉框的实例

功能：根据选择不同层次，在专业下拉框中动态生成对应分类的专业。

HTML：

<label>层次</label>
<select name="level" id="level">
 <option value="1">本科</option>
 <option value="2">高职（专科）</option>
</select>
<label>专业</label>
<select name="major" id="major">
 <option value="">--</option>
</select>

JQuery：

$("#level").click(function(){
      $.ajax({
       type:"POST",
       url:"{:U('Target/queryMajor')}",
       dataType: "json",
       data:{
        level:$('#level').val()
       },
       success:function(data){
        $("#major").empty();
        switch (data.status){
         case '1':
          $("#major").append("<option value='' >--</option>");
          $.each(data.data,function(index,val){
           $("#major").append('<option value='+val.major+' >'+val.major+'</option>');
          });
          break;
         case '0':
          $("#major").append("<option value='' >--</option>");
          break;
        }
        return false;
       }
      });
      return false;
     });

后台控制器：

public function queryMajor()
 {
 if(I('post.level') == 1){$ccmc = '本科';}else{$ccmc = '高职（专科）';}
 $dao = M('Plan');
 $condition["ccmc"] = $ccmc;
 $record = $dao->where($condition)->field('major')->select();
 if($record != null){
 $this->ajaxReturn($record,'','1');
 }else{
 $this->ajaxReturn('','','0');
 }
 }

以上这篇Ajax获取php返回json数据动态生成select下拉框的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ajax+php 谷歌搜索框自动填充功能 实例代码

    复制代码 代码如下: <html> <head> <script language="javascript"><!-- var http_request; function update(v){ if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { /

  • Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册

    动态验证:(不需要建Model模型) 1.建一个控制器,做表单操作(包含验证) <?php namespace Biaodan\Controller; use Think\Controller; class BiaodanController extends Controller { public function test() { if(empty($_POST))//如果$_POST空,显示添加页面, { $this->show(); } else //如果$_POST不为空,走验证,验证

  • Ajax+php实现商品分类三级联动

    Ajax+php实现商品分类三级联动

    当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现: 1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值 2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值 3.当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值 页面效果:  $(function(){ //

  • Jquery+Ajax+PHP+MySQL实现分类列表管理(上)

    Jquery+Ajax+PHP+MySQL实现分类列表管理(上)

    在实际应用中,我们要管理一个客户分类,实现对客户分类的增加.删除和修改等操作,如何让这些操作变得更人性化,让用户操作起来更加方便成了我们必须研究的课题. 准备阶段 您需要具备HTML和Jquery等前端知识,以及基本的PHP程序和MySql数据库相关知识.要实现本文中的DEMO示例,首先需要一个mysql数据库: CREATE TABLE `catalist` ( `cid` int(11) NOT NULL auto_increment, `title` varchar(100) NOT NU

  • php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $

  • Jquery+Ajax+PHP+MySQL实现分类列表管理(下)

    在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子. 本文将继续上篇文中的示例,完成编辑操作. 编辑项操作 用户通过单击"编辑"按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击"保存"按钮完成编辑操作,也可以单击"取消"按钮取消编辑状态. 首先,通过单击"编辑"

  • jQuery+PHP+ajax实现微博加载更多内容列表功能

    在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作

  • Ajax+PHP实现的分类列表框功能示例

    Ajax+PHP实现的分类列表框功能示例

    本文实例讲述了Ajax+PHP实现的分类列表框功能.分享给大家供大家参考,具体如下: 一 代码 conn.php: <?php $conn = mysql_connect("localhost", "root", "root") or die("连接数据库服务器失败!".mysql_error()); //连接MySQL服务器 mysql_select_db("db_database27",$conn

  • Ajax获取php返回json数据动态生成select下拉框的实例

    功能:根据选择不同层次,在专业下拉框中动态生成对应分类的专业. HTML: <label>层次</label> <select name="level" id="level"> <option value="1">本科</option> <option value="2">高职(专科)</option> </select> <

  • bootstrap动态调用select下拉框的实例代码

    html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</label> <div class="col-sm-3"> <select class="selectpicker form-control" data-live-search="true" name="addid&quo

  • AngularJS动态生成select下拉框的方法实例

    一.select相关知识 <select> <option value="0">HTML</option> <option value="1">Java</option> <option value="2">Python</option> </select> 其中,value 是存储到数据库的值,在此处为0,1,2这些数值,label 为显示在页面的值

  • ajax请求后台得到json数据后动态生成树形下拉框的方法

    如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD

  • Layui动态生成select下拉选择框不显示的解决方法

    给代码添加如下部分: layui.use('form', function(){ //此段代码必不可少 var form = layui.form; form.render(); }); 实现效果: HTML代码: <div class="layui-form-item"> <label class="layui-form-label">执行周期</label> <div class="layui-input-in

  • JavaScript动态操作select下拉框

    JavaScript动态操作select下拉框

    相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了问题,没查到太过详细的解决方案,自己动手操作记录一下. 首先就是咱们的老朋友"select"标签,因为需要js.jq两种操作,所以就定义两个select标签. HTML代码: <div style="width: 200px;height: 100px;margin: auto;margin-top: 100px;padding: 2

  • jQGrid动态填充select下拉框的选项值(动态填充)

    本文给大家分享一段代码关于技巧jqgrid动态填充select 下拉框的选项值,非常不多说了,直接给大家贴代码了,具体代码如下所示: function gettypes(){ //动态生成select内容 var str=""; $.ajax({ type:"post", async:false, url:"checkpersontype", success:function(data){ if (data != null) { var json

  • JavaScript实现将数组数据添加到Select下拉框的方法

    JavaScript实现将数组数据添加到Select下拉框的方法

    本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法.分享给大家供大家参考.具体如下: 这里演示将数组中的数据添加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数据,更换Select内容的时候,直接替换数组中的内容就可以了.适合前端设计者实现前台的部分本地化脚本操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-array-add-select-data-codes/ 具体代码如下: <!D

  • bootstrap里bootstrap动态加载下拉框的实例讲解

    实例如下所示: //引入的包 <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="map/plug-in/scripts/bootstrap/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" type="t

  • JavaScript实现获取select下拉框中第一个值的方法

    JavaScript实现获取select下拉框中第一个值的方法

    本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法.分享给大家供大家参考,具体如下: 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

随机推荐