ajax异步提交数据动态更改select选项

<!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;
   }




?>

 

转载于:https://www.cnblogs.com/hzijone/p/5574229.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
确切实现细节会依赖具体的应用场景,但一般来说,可以通过前端的Ajax与服务端进行交互,从服务端获取班级和学生选项数据,并实现下拉框联动。以下是一个可能的实现方式: 1.定义Springboot的Controller,在其中实现AJAX接口,该接口与前端进行交互,接受前端发送的请求,并返回需要的数据。例如: ``` @RestController @RequestMapping("/api") public class AjaxController { @RequestMapping("/getClasses") public List<String> getClasses() { // 从服务端获取班级列表数据 List<String> classes = new ArrayList<>(); classes.add("ClassA"); classes.add("ClassB"); classes.add("ClassC"); return classes; } @RequestMapping("/getStudents") public List<String> getStudents(@RequestParam("class") String classname) { // 从服务端获取班级为classname的学生列表数据 List<String> students = new ArrayList<>(); if ("ClassA".equals(classname)) { students.add("StudentA1"); students.add("StudentA2"); } else if ("ClassB".equals(classname)) { students.add("StudentB1"); students.add("StudentB2"); students.add("StudentB3"); } else if ("ClassC".equals(classname)) { students.add("StudentC1"); students.add("StudentC2"); } return students; } } ``` 2.在前端页面中使用JavaScript编写AJAX代码,向服务端请求班级和学生列表数据,并实现下拉框的联动。例如,使用jQuery: ``` <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <select id="classSelect"> <option value="">--请选择班级--</option> </select> <select id="studentSelect"> <option value="">--请选择学生--</option> </select> <script type="text/javascript"> $(function() { // 初始化班级下拉框 $.ajax("/api/getClasses", { type: "GET", dataType: "json", success: function(data) { for (var i = 0; i < data.length; i++) { $("#classSelect").append('<option value="' + data[i] + '">' + data[i] + '</option>'); } } }); // 班级下拉框改变时,更新学生下拉框 $("#classSelect").on("change", function() { var classname = $("#classSelect").val(); $.ajax("/api/getStudents", { type: "GET", data: {class: classname}, dataType: "json", success: function(data) { $("#studentSelect option:gt(0)").remove(); for (var i = 0; i < data.length; i++) { $("#studentSelect").append('<option value="' + data[i] + '">' + data[i] + '</option>'); } } }); }); }); </script> </body> ``` 以上代码实现了一个班级和学生下拉框的联动,当班级选项改变时,会通过AJAX向服务端请求学生列表,然后动态更新学生下拉框。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值