调用ajax动态获取select框的值，默认不选中

淡淡的烟草味﹌ 2022-03-28 11:28 320阅读 0赞

![20190110144722221.png][]

从后台动态获取的数据

![20190110144545344.png][]

红色标记的是动态向数组开头追加的对象

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>获取select框值</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    		<meta name="apple-mobile-web-app-capable" content="yes">
    		<meta name="format-detection" content="telephone=no" />
    		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    	</head>
    
    	<body>
    		<div>
    			<select>
    				
    			</select>
    		</div>
    		<div class="sub">提交</div>
    	</body>
    
    </html>
    <script type="text/javascript" src="../demo/js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../demo/layer/layer.js"></script>
    <script type="text/javascript">
    	$(function() {
    
    		$.ajax({
    			type: "post",
    			url: ""//接口地址
    			data: {
    				//参数
    			},
    			success: function(data) {
    				console.log(data)
    				if(data.code == 1) { //请求成功
    					var con = data.result.res;
    					if(con.length != 0) {
    						console.log(con);
    						var text = {
    							m_id: '0',
    							m_name: '请选择套餐'
    						}
    						con.unshift(text); //向数组开头追加一个对象
    						var html = '';
    						$.each(con, function(k, v) {
    							var m_id = con[k].m_id; //商品id
    							console.log(m_id);
    							var m_name = con[k].m_name; //商品名称
    							html += "<option value=" + m_name + ">" + m_name + "</option>"
    						});
    						$('select').append(html); //动态显示下拉列表数据
    					} else {
    
    					}
    				}
    
    			}
    		});
    		$(".sub").click(function() {
    			var sel_name = $('select').val();
    			if(sel_name == "请选择套餐") {
    				layer.msg("请选择套餐类型")
    			} else {
    				layer.msg("提交成功")
    				console.log(sel_name) //打印出选中的值
    			}
    		})
    	})
    </script>

[20190110144722221.png]: /images/20220328/a2f64f9026df4698b3782ad9b0fc0b5b.png
[20190110144545344.png]: /images/20220328/14fcca48ba9c4fedac67df163322c670.png