<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="../jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<script type="text/javascript">

    $(function(){

        // $("select[name='projectName']")

      $("#projectName").change(function(event) {

          /* Act on the event */

            $("#projectName").find('option:selected').text();

      var projectId=$("#projectName").find('option:selected').val();

   $.ajax({

                  url:'package_usb_submit.php',

                  type: 'post',

                  dataType: 'text',

                  data:'contents='+projectId,

                  success: function (data) {

                          // console.log(data)

                          var jsonObj=eval("("+data+")");

                          // console.log(jsonObj);

                          // console.log(jsonObj['content']);

                          var jsonArr=jsonObj['content'];

                          var option;

                          $("#version").empty();

                          for (var i = 0; i<jsonArr.length; i++) {

                                  console.log(jsonArr[i].desc);

                                 option = $("<option>").val(jsonArr[i].ver).text(jsonArr[i].desc);

                              $("#version").append(option);

                          }

                      }

                  })

           })

      });

    // })

</script>

<body>

   <div align="center">

    <form action="package_usb_submit.php" method="get" accept-charset="utf-8">

       <table>

           <tbody>

               <tr>

                   <td>打包版本:</td>

                   <td>

                   <select name="projectName" id="projectName">

                    <?php

                      for ($i=0; $i <3 ; $i++) {

                          echo "<option value='$i'>";

                          echo  "$i";

                          echo "</option>";

                      }

                    ?>

                    </select>

                   </td>

                   <td>

                    <select name='version' id='version'>

                        <?php

                          for ($i=0; $i <5 ; $i++) {

                                   echo "<option value='$i'>";

                                  echo  "$i";

                                  echo "</option>";

                          }

                        ?>

                    </select>

                   </td>

        </tr>

           </tbody>

       </table>

       <input type="submit" name="" value="OK">

    </form>

   </div>

</body>

</html>

后台数据返回:

<?php 

  // print_r($_REQUEST);

   switch ($_REQUEST['contents']) {

       case 0:

           echo '{"content":[{"ver":"10","desc":"abc"},{"ver":"12","desc":"abcd"}] }';

           break;

       case 1:

           echo '{"content":[{"ver":"1","desc":"abc"},{"ver":"2","desc":"abcd"}] }';

           break;

       default:

           # code...

           break;

   }

?>

ajax异步提交数据动态更改select选项的更多相关文章

  1. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  2. JQuery中使用FormData异步提交数据和提交文件

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...

  3. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  4. ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  5. AJAX异步提交，浏览器总跳出下载界面

    问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口, ...

  6. Ajax异步提交登录(2)--登录使用

    http://cjp1989.iteye.com/blog/1740964 1.Ajax的原理: Ajax的原理就是:通过javascript的方式,将前台数据通过xmlhttp对象传递到后台,后台在 ...

  7. ajax 异步 提交 含文件的表单

    1.前言 需求是使用 jquery 的 ajax 异步提交表单,当然,不是简单的数据,而是包含文件数据的表单.于是我想到了 new FormData() 的用法, 可是仍然提交失败,原来是ajax的属 ...

  8. ASP模拟POST请求异步提交数据的方法

    这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...

  9. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

随机推荐

  1. linux下安装zookeeper（单机版）

    Zookeeper 分布式服务框架是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等.本文主要从使用者角度来介绍一下Zookeeper ...

  2. Mysql学习笔记（三）对表数据的增删改查。

    正文内容. 这一部分是最简单的,也是最麻烦的.简单是因为其实只包括增删该插四个部分.大体上看,增加数据.删除数据.修改数据.查询数据都不麻烦啊,我们日常都是常用的.这个谁不会呢?以前在培训机构学mys ...

  3. 转: CvMat，Mat和IplImage之间的转化和拷贝

    1.CvMat之间的复制 //注意:深拷贝 - 单独分配空间,两者相互独立 CvMat* a; CvMat* b = cvCloneMat(a); //copy a to b 2.Mat之间的复制 / ...

  4. git 推送

    echo "# shops" >> README.md git init git add README.md git commit -m "first com ...

  5. （转）HBase 的原理和设计

    转自:HBase的原理和设计 HBase架构:

  6. 有关stdint.h 文件

    有关stdint.h 文件 Google C++编程规范的P25页有如下叙述: <stdint.h> 定义了 int16_t . uint32_t . int64_t 等整型,在需要确定大 ...

  7. C#--副线程调用主线程的控件

    1.取消线程安全保护模式     在程序初始化的时候对要操作的控件设置下面的属性:     System.Windows.Forms.Control.CheckForIllegalCrossThrea ...

  8. Tween + 缓动函数

    Unity-Tween http://www.cnblogs.com/MrZivChu/p/UnityTween.html iTween: iTween大解构(一)之抛物线移动 http://blog ...

  9. TCP的三次握手与四次分手

    TCP的位置 TCP工作在网络OSI的七层模型中的第四层——Transport层,IP在第三层——Network层,ARP在第二层——Data Link层: 在第二层上的数据,我们把它叫Frame,在 ...

  10. php引用计数的基本知识

    每个php变量存在一个叫"zval"的变量容器中.一个zval变量容器,除了包含变量的类型和值,还包括两个字节的额外信息.第一个是"is_ref",是个bool ...