JQuery 获取选中select下拉框的value和text的值，合并成数组传给后端

王小婷

发布于 2025-05-20 05:23:28

12900

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：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>