<!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. [JavaEE]调用Restful Service 出现415 Unsupported Media Type的问题（Rest Request Header中的Content-Type问题）

    用Chrome的插件Simple REST Client 调用POST的REST服务时,老是报415错误,如图. 一开始就以为是服务端的问题,各种google,百度,折腾了一下午未果. 晚上继续看,一 ...

  2. ASP.NET WEB API 测试

    编码时测试: Postman + Fiddler4 Postman进行发包 Fiddler4进行抓包 编码结束后测试: 通过Nuget引入组件WebApiTestClient: 接口文档 类属性 测试

  3. DiskFileItemFactory类

    将请求消息实体中的每一个项目封装成单独的DiskFileItem (FileItem接口的实现) 对象的任务由 org.apache.commons.fileupload.FileItemFactor ...

  4. MySql视图、存储过程、函数、索引

    一.视图 视图是查询命令结果构成的一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集合,并可以当作表来查询使用. 1创建视图 - ...

  5. apache安装错误error: APR not found解决办法

    linux安装时安装种类不同,一些组件包可能不会被安装,导致linux下安装软件的时候缺这个缺那个,今天为大家介绍linux安装apache时报apr找不到的解决办法 方法/步骤   下载依赖包 wg ...

  6. INADDR_ANY

    INADDR_ANY就是指定地址为0.0.0.0的地址,这个地址事实上表示不确定地址,或“所有地址”.“任意地址”. 一般来说,在各个系统中均定义成为0值. 外文名 INADDR_ANY 别 名 所有 ...

  7. Javascript中call、apply、bind函数

    javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数 javascript中函数也是对象,call.apply.bind函数就是函数中的三个函数,这 ...

  8. Javascript权威指南——第一章Javascript概述

    示例:javascript贷款计算器 相关技术: 1.如何在文档中查找元素: 2.如何通过表单input元素来获取用户的输入数据: 3.如何通过文档元素来设置HTML内容: 4.如何将数据存储在浏览器 ...

  9. sqlserver插入时发生在“xxx”处关键发生错误

    今天知道了一个小技巧,当你的数据库表名为user时会sqlserver的表发生冲突,所以因该将user这样用[user],ok 一切搞定 .

  10. UVa 11988 Broken Keyboard（链表->数组实现）

    /*数组形式描述链表:链表不一定要用指针. 题目链接:UVa 11988 Broken Keyboard 题目大意: 小明没有开屏幕输入一个字符串,电脑键盘出现了问题会不定时的录入 home end ...