ajax中select获取默认值

ps: 最近项目改bug,遇到前端的问题,花了不少时间才找出毛病,在这里做个记录。避免同样的问题。随便分享一下,防止踩坑。。。
场景:页面展示一列列数据;选中某列,点击编辑,跳转到编辑页面;将该列的某个属性值展示在编辑页面的select框中。(select默认值)

一、 运用到的知识点

  1. ajax
    项目中经常运用到ajax来请求数据,接受后台数据,用于在前台展示。
    ajax 是异步请求,局部加载数据;与url 请求不同,不会刷新页面。但是对请求我们可以 通过属性async来控制同步和异步。
    同步与异步的主要区别:
    同步可以改变外部定义的变量值,
    异步可以提高加载效率

  2. 异步和同步
    异步:ajax不会影响整个页面的加载,相当于和浏览器加载或者用户操作分开走,互不相干,体现在用户角度就是不会有什么卡顿的感觉仿佛无事发生。
    同步:那就与异步相反,他和加载处于同一条线上,等这位大爷过了马路,后面的人才能接着走,就是在加载它的时候,全部的过程都等停下来,也就是假死状态。

  3. select下拉框设置默认值

$("#fwtxxmbUpdateTemp select[name='type']").attr("value",type);

二、项目实例

  1. ajax请求数据,在编辑页面一打开,会有动态的下拉框
var typename="";
var typecode="";
function qeuryTempletnameList(){
	$.ajax({
		url: XXXX,  //请求地址
		type: "POST",
		async:false,    // 设置成同步,typename,typecode外部变量才能接受值
		dataType: "json",
		success : function(data){  
			 var datas = data.data;
			 var optionstring ="";
             for (var i =0 ; i < datas.length ; i++) {                 
                 optionstring += "<option value=\"" + datas[i].TYPECODE + "\" >" + datas[i].TYPENAME + "</option>";  
                 typename = datas[i].TYPENAME;
                 typecode = datas[i].TYPECODE;
             }
             $("#type").html("<option value=\"\">--请选择--</option>" + optionstring);            
		}
	});
}

ajax 在这里插入图片描述
2. 点击展示是默认值

$.open({
					title:title,
					width:"700px",
					height:"80%",
				    content:$("#xxx").html(),
				    btns:btns,
				    success : function(){	
				        qeuryTempletnameList();		    					    	
				    	var type = data.data.type;     //data.data是另个请求的返回的数据,在这里我没有写
				    	//通过设置value属性值,获取select值
                        $("#Temp select[name='type']").attr("value",type);	   	
				    }
	})

效果: //从列表页面 带到 编辑页面 的 默认选中数据
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是可以实现该功能的PHP页面代码: ```php <!DOCTYPE html> <html> <head> <title>动态生成下拉菜单</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 发送 AJAX 请求获取可选年份 $.ajax({ type: "POST", url: "get_years.php", dataType: "json", success: function(data){ // 将年份添加到下拉菜单 var select = $("#year"); $.each(data, function(key, value){ select.append($("<option></option>").attr("value",value).text(value)); }); // 监听下拉菜单的 change 事件 select.change(function(){ // 获取所选年份 var year = $(this).val(); // 发送 AJAX 请求获取可选月份 $.ajax({ type: "POST", url: "get_months.php", data: {year: year}, dataType: "json", success: function(data){ // 将月份添加到第二个下拉菜单的子菜单 var selectMonth = $("#month"); selectMonth.empty(); selectMonth.append($("<option></option>").attr("value","select month").text("select month")); $.each(data, function(key, value){ selectMonth.append($("<option></option>").attr("value",value).text(value)); }); } }); }); } }); }); </script> </head> <body> <select id="year"> <option value="">select year</option> </select> <select id="month"> <option value="select month">select month</option> </select> </body> </html> ``` 此外,还需要编写 `get_years.php` 和 `get_months.php` 文件来处理 AJAX 请求。以下是 `get_years.php` 文件的代码: ```php <?php header("Content-Type: application/json;charset=utf-8"); // 获取当前年份 $current_year = date("Y"); // 生成可选年份数组 $years = array(); for ($i = $current_year; $i >= $current_year - 10; $i--) { array_push($years, $i); } // 输出 JSON 格式的年份数据 echo json_encode($years); ?> ``` 以下是 `get_months.php` 文件的代码: ```php <?php header("Content-Type: application/json;charset=utf-8"); // 获取所选年份 $year = $_POST["year"]; // 生成可选月份数组 $months = array(); for ($i = 1; $i <= 12; $i++) { array_push($months, str_pad($i, 2, "0", STR_PAD_LEFT)); } // 输出 JSON 格式的月份数据 echo json_encode($months); ?> ``` 这样就可以在 PHP 页面动态生成两个下拉菜单,并且根据所选年份动态生成对应的月份下拉菜单了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值