<!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. PMD使用提醒

    1.注册登录后进入主界面,向右滑动出现侧滑栏 2.点击蓄水球进行每日目标设定 3.设置计时失败发送朋友圈内容 ~~~~~开始体验吧!!!

  2. Gated Recurrent Unit (GRU)公式简介

    update gate $z_t$: defines how much of the previous memory to keep around. \[z_t = \sigma ( W^z x_t+ ...

  3. MySql中时间比较的实现

        unix_timestamp 函数可以接受一个参数,也可以不使用参数.它的返回值是一个无符号的整数.不使用参数,它返回自1970年1月1日0时0分0秒到现在所经过的秒数,如果 使用参数,参数的 ...

  4. javascript 代码可读性

    可读性的大部分内容都是和代码缩进相关的,必须保证代码有良好的格式.可读性的另一方面就是注释,一般而言,有如下一些地方需要进行注释 1.1.1 函数和方法 每个函数或方法都应该包含一个注释,描述其目的和 ...

  5. BZOJ2960: 跨平面

    从一条边出发遍历,每次找旋转角度最小的一条边作为下一条边,直到回到出发的边,就得到了一个区域.这样建出对偶图后跑不定根的最小树形图就行了. #include<bits/stdc++.h> ...

  6. StringBuilder 和 StringBuffer

    这两者唯一的不同就在于,StringBuffer是线程安全的,而StringBuilder不是.当然线程安全是有成本的,影响性能,而字符串对象及操作,大部分情况下,没有线程安全的问题,适合使用Stri ...

  7. 9.13 JS循环

    循环:循环操作某一个功能(执行某段代码) 四要素: 循环初始值 循环条件 状态改变 循环体       for  穷举     迭代            i++;等价于i=i+1;  ++I;等价于 ...

  8. win7 中maven安装

    1. 下载Maven 下载地址为:http://maven.apache.org/download.html,现在最高的版本为3.0.2,在win7下载文件为:apache-maven-3.0.2-b ...

  9. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【二】——使用Repository模式构建数据库访问层

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 在数据访问层应用Repository模式来隔离对领域对象的细节操作是很有意义的.它位于映射层 ...

  10. C++ 函数返回数组指针的问题

    提醒一下:int *func(){int a[10] = {5};return a;}是非法的,因为 a 是局部变量,被申请在系统栈中,局部变量在函数返回后会被销毁,于是你返回的指针指向的是一段已经被 ...