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

Posted 2020-07-24 cogitoergosum

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
   }




?>

以上是关于ajax异步提交数据动态更改select选项的主要内容，如果未能解决你的问题，请参考以下文章

Datatables post 动态提交数据(传参数) 异步数据(ajax.data)

如何使用 jQuery ajax() 方法异步提交验证用户登录