前端jQuery动态设置select选中，form提交值
2019-04-03 本文已影响0人
阿克兰
select下的option都是通过动态设置的
domo
domo2.png
完整代码如下
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jQuery-2.2.0.min.js"></script>
</head>
<body>
<form id="formbox">
<div style="width:400px;height: 50px" >
<select name="hh" data-id="1" class="isid">
<option value="1">插件</option>
<option value="2">大哥</option>
<option value="3">TGV</option>
<option value="4">看过</option>
</select>
</div>
<div style="width:400px;height: 50px" >
<select name="cc" data-id="4" class="isid">
<option value="1">插件</option>
<option value="2">大哥</option>
<option value="3">TGV</option>
<option value="4">看过</option>
</select>
</div>
<div style="width:400px;height: 50px" >
<select name=ee"" data-id="2" class="isid">
<option value="1">插件</option>
<option value="2">大哥</option>
<option value="3">TGV</option>
<option value="4">看过</option>
</select>
</div>
<div style="width:400px;height: 50px">
<select name="ssde" data-id="3" class="isid">
<option value="1">插件</option>
<option value="2">大哥</option>
<option value="3">TGV</option>
<option value="4">看过</option>
</select>
</div>
</form>
<button class="putss">提交</button>
<textarea class="infos" style="display:block;width:400px;height:300px;margin-top: 50px;font-size: 24px"></textarea>
</body>
</html>
<script>
var dataids=valuess='';
var ids= $(".isid").data('id');
$(".isid").each(function(i,d){
var dataids=$(this).data('id')
$("option",d).each(function(m,n){
var valuess= $(this).val();
if(dataids==valuess){
$(this).attr("selected",true);
}
})
}
)
$('.putss').on("click",function(){
var h =$("#formbox").serialize()
$(".infos").html(h)
})
</script>
关键在于根据父元素select 中的data-id,这是后台获得的数据，data-id=3表示.opstion中value=3的选中；所以得用到each进行遍历,然后设置这个selected为true就好了。
var ids= $(".isid").data('id');
$(".isid").each(function(i,d){
var dataids=$(this).data('id')
$("option",d).each(function(m,n){
var valuess= $(this).val();
if(dataids==valuess){
$(this).attr("selected",true);
}
})
}
)
