码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-06-10 21:46:31      阅读:515      评论:0      收藏:0      [点我收藏+]

标签:

<!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选项

标签:

原文地址:http://www.cnblogs.com/hzijone/p/5574229.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!