使用JavaScript根据从后台获取来的数据打开一个新的页面

最新推荐文章于 2023-04-18 11:29:52 发布

weixin_33991418

最新推荐文章于 2023-04-18 11:29:52 发布

阅读量935

点赞数

文章标签： javascript 后端前端 ViewUI

本文介绍了一个使用HTML和JavaScript实现的下拉菜单案例，该案例通过AJAX从服务器获取数据并动态填充下拉选项。此外，还包括了根据用户选择跳转到不同页面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码是：

入库类型是：
<select id="selectIn" onchange="goUrl(this.options[this.selectedIndex])">
    <!--<option value="0">请选择</option>-->
    <!--<option value="comAdmin_in_purchase.html">采购</option>-->
    <!--<option value="comAdmin_in_return.html">归还</option>-->
    <!--<option value="comAdmin_in_gain.html">受赠</option>-->
</select>

JavaScript：
//选择触发事件
function goUrl(obj){
    if(obj.value==1){
        window.location.href="comAdmin_in_purchase.html";
    }
    if(obj.value==2){
        window.location.href="comAdmin_in_return.html";
    }
    if(obj.value==3){
        window.location.href="comAdmin_in_gain.html";          
   }
}

JavaScript代码是：

$(document).ready(function () {
     getIntype();
  });
     
 function getIntype(){
      $.ajax({
      type:"post",
      dataType:"json",
      url:"http://192.168.35.111:8080/officeSystem/InstorageCheckIn/getInstorageType.do",

      success:function(data){
           var len=data.length;
           $("#selectIn").append(('<option value="0"> </option>'));
           for(var i=0;i<len;i++){
           $("#selectIn").append(('<option value='+data[i].id+'>'+data[i].name+'</option>'));
       }
},
      error:function(data){
          console.log(data);
        }
    });
}

结果截图：