JQuery 获取选中select下拉框的value和text的
2022-03-07 本文已影响0人
祈澈菇凉
提交格式
"workFences": [
{
"fenceId": "ew32w2wf232fwer23",
"fenceName": "区域q"
},
{
"fenceId": "ew32w2wf232fw543r23",
"fenceName": "区域b"
}
],
test.json
{"msg":"查询成功","code":1,"data":[{"text":"下部区域","value":"fid--df79988_17d37d0f139_-730c"},{"text":"上部区域","value":"fid--df79988_17d696bb10d_-3a8"},{"text":"中间区域","value":"fid--df79988_17dd6406412_78bd"}]}
例子
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>JQuery 获取选中select下拉框的value和text的值，合并成数组传给后端</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="col-md-2 col-sm-2 col-xs-2 control-label">工作区域
</label>
<div class="col-md-5 col-sm-5 col-xs-5">
<select id="workArea" class="form-control select2" style="width: 345px">
</select>
</div>
</div>
</div>
</div>
<button type="submit" id="submit">提交</button>
</body>
<script type="text/javascript">
//获取下拉框
$.ajax({
url: "test.json",
type: "get",
success: function(data) {
var html = "";
$.each(data.data, function(i, item) {
html += "<option value=" + item.value + ">" + item.text + "</option>";
})
$("#workArea").html(html)
}
})
$("#submit").click(function() {
var params = {
workFences: getSelectArea(),
}
alert(JSON.stringify(params))
$.ajax({
url: "test.json",
data: JSON.stringify(params),
type: "GET",
success: function(data) {},
error: function(err) {
console.log(err);
}
})
})
//获取下拉框区域
function getSelectArea() {
var selectArea = new Array(); //创建list集合
$("#workArea option:selected").each(function(i, value) {
debugger
var obj = {};
obj.fenceId = $(this).val();
selectArea.push(obj);
});
$("#workArea option:selected").each(function (i, value) {
selectArea[i].fenceName = $(this).text();
});
return selectArea;
}
</script>
</html>
