<!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. FZU 2193 So Hard （有限小数转换最简分数）（想法题）

    题目链接: 传送门 So Hard Time Limit: 1000MS     Memory Limit: 65536K 题目描述 请将有限小数化为最简分数. 输入 一个整数n 表示需要转化的小数个 ...

  2. 修改oracle系统用户system的密码

    C:\Users\Administrator>echo %ORACLE_SID% %ORACLE_SID% C:\Users\Administrator>set ORACLE_SID=or ...

  3. JavaWeb学习总结-07 Filter 学习和使用

    一 Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  4. BZOJ树链剖分题目汇总

    1036,2157,2243,4034,4196;2325,2908,3083,3159,3531,3626,3999;可以不树剖:1146;2819,2843,4448,4530.

  5. java常用集合详解 contains

    java集合是对常用数据集合的封装,差不多就是数组吧,验证某个元素是否在数据集合里,最原始的方法是,用个循环,"某个元素"与数据集合中的每个元素逐个进行比较. java 对常用的一 ...

  6. ORACLE 错误：oralce record is locked by another user

     方法/步骤     打开PL/SQL客户端,然后修改表记录中的数据,提交修改,如下提示 步骤阅读 2 我们关闭异常警告窗口,在执行sql的窗口中输入如下命令:select t2.username,t ...

  7. 有了这个，再也不用每次连新机器都要设置secure crt属性了

    我连服务器用的是secure crt,每次ssh新服务器的时候都得手动设置字符编码和背景颜色,今天问了旁边的开发原来可以全局设置,以后连服务器的时候就再也不用手动设置相关属性了.步骤如下: 一开始点击 ...

  8. 使用docker exec 就可以进入container，例如：docker exec -it <container_id> /bin/bash

    使用docker exec 就可以进入container,例如:docker exec -it <container_id> /bin/bash

  9. Python之路【第八篇】python实现线程池

    线程池概念 什么是线程池?诸如web服务器.数据库服务器.文件服务器和邮件服务器等许多服务器应用都面向处理来自某些远程来源的大量短小的任务.构建服务器应用程序的一个过于简单的模型是:每当一个请求到达就 ...

  10. 开发Yii2过滤器并通过behaviors()行为调用

    在Yii2的几乎每个controller中,我们都会看到一个函数behaviors(),通常,我们用这个函数来配置控制器的权限,例如:public function behaviors()    {  ...