Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JQuery 获取选中select下拉框的value和text的值,合并成数组传给后端

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

作者头像
王小婷
发布于 2025-05-20 05:23:28
发布于 2025-05-20 05:23:28
16901
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:1
代码可运行

提交格式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"workFences": [
        {
            "fenceId": "ew32w2wf232fwer23",
            "fenceName": "区域q"
        },
        {
            "fenceId": "ew32w2wf232fw543r23",
            "fenceName": "区域b"
        }
    ],

test.json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{"msg":"查询成功","code":1,"data":[{"text":"下部区域","value":"fid--df79988_17d37d0f139_-730c"},{"text":"上部区域","value":"fid--df79988_17d696bb10d_-3a8"},{"text":"中间区域","value":"fid--df79988_17dd6406412_78bd"}]}

例子

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
最强大的 CSS 布局 —— Grid 布局
Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案,是目前唯一一种 CSS 二维布局。利用 Grid 布局,我们可以轻松实现类似下图布局,演示地址[1]
GopalFeng
2020/09/24
16.3K0
最强大的 CSS 布局 —— Grid 布局
Grid网格布局入门
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
javascript.shop
2019/09/04
2.3K1
Grid网格布局入门
【CSS】最强大的布局之grid布局精讲
轮播图swiper框架的基本使用 【Transform3D】转换详解(看完就会) 【css动画】移动的小车
坚毅的小解同志的前端社区
2022/11/28
3.1K0
【CSS】最强大的布局之grid布局精讲
【图片版】CSS网格布局(Grid)完全教程
CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式,从本质上都是Hack的方式,并且遗漏了一些重要的功能(比如:垂直居中)。Flexbox的出现部分解决了上述问题,但Flex布局是为了解决简单的一维布局,适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现的,适用页面的整体布局。在实际工作中,Grid和Flexbox不但不矛盾,而且还能很好的结合使用。做为WEB程序员,我们在页面布局问题上都付出过努力,也将不断探索新的方案。而Grid是第一个专门为布局问题而生的CSS模块,我们有理由对Grid充满期待。
毛瑞
2018/05/02
5.3K0
【图片版】CSS网格布局(Grid)完全教程
[译]二维布局:Grid Layout
CSS Grid Layout 是 CSS 中最强大的布局系统。不像 flexbox 那样的一维系统,它是一个二维系统,可以同时处理列和行。您可以通过将规则应用到父元素来使用 Grid Layout。
码农小余
2022/06/16
4.7K0
[译]二维布局:Grid Layout
CSS(七)
Grid 布局是 CSS 中最强大的布局系统。 Grid 布局是一个二维布局系统,意味着它可以处理列和行,不像 Flexbox 主要是一维布局系统。通过将 CSS 规则应用于父元素(称为 grid container)和子元素(称为 grid items),我们就可以使用网格布局。
1ess
2021/10/29
5430
CSS(七)
图解CSS布局(一)- Grid布局
Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局,也是唯一的二维布局方案,利用grid布局可以很轻松的实现很多的网页布局
小丞同学
2021/08/16
2.1K0
万字总结 CSS 布局
本文总结了主流的几种 CSS 的布局方法,无论你是一个想要学习 CSS 布局的新手,还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者,这篇指南都能帮你全面了解如今CSS布局发展的现状。
用户8921923
2022/10/24
6.1K0
万字总结 CSS 布局
grid网格布局
​ 距今来看已经十多年了,确确实实占据了前端布局中很大的地位,相比大家对flex都很熟悉,所以今天我们的主角就是-------> Grid
Snine
2022/02/11
2.1K0
grid网格布局
Web前端学习 第2章 网页重构16 grid布局
grid容器的水平区域成为行(row),垂直区域成为列(column),行与列之间的较差与是单元格(cell),划分网格的线成为网格线(gird line),了解了这些基本概念之后,就可以开始用相应的css属性设置grid容器中的项目了。
学习猿地
2020/06/15
1K0
Web前端学习 第2章 网页重构16 grid布局
Grid布局详解:打造完美的网页布局
随着Web技术的不断发展,网页布局也在不断地改进和完善,其中Grid布局是最受欢迎的一种布局方式。它是一种基于网格线的布局方式,可以轻松地实现复杂的网页布局,而且还具有很强的可读性和可维护性。
Front_Yue
2023/12/22
1.7K0
Grid布局详解:打造完美的网页布局
CSS 中的 Grid 布局 完全指南
Grid 是一个基于二维网格布局的系统,有了它我们可以非常方便的实现过去很复杂布局,无需再使用float, inline-block, position 这些本质上是 hack 的方法。
羽月
2022/10/08
4.2K0
CSS 中的 Grid 布局 完全指南
10分钟理解CSS3 Grid
上一篇文章我们介绍了 css3 flexbox,今天我们再来说说css3的另外一个强大的功能:Grid。 Grid做前端的同学应该都很熟悉了,翻译成中文为“栅格”,用过bootstrap、semantic ui、ant design的同学肯定都了解grid layout(删格布局),以往css框架中的grid布局一般是通过float和百分比的宽度实现的,这种实现有几种缺点:
MudOnTire
2019/05/26
7910
CSS Flexbox与Grid:构建响应式布局的艺术
开启Flex布局模式。将一个元素设置为Flex容器,其直接子元素将成为Flex项目。
天涯学馆
2024/05/22
5370
CSS Flexbox与Grid:构建响应式布局的艺术
grid布局—让css变得更简单
通过将属性display的值设为grid,使 HTML 元素变为网格容器。在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。
_kyle
2020/08/24
5.7K0
grid布局—让css变得更简单
grid 布局的使用
grid 布局的使用    css 网格布局,是一种二维布局系统。    浏览器支持情况:老旧浏览器不支持,    概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。       <div class="container">          <div class="item item-1"></div>         <div class="item item-2"></div>         <div class="item item-3"></div>       
用户1197315
2018/01/22
1.7K0
[CSS] 栅格化布局
栅格化布局帮助你更容易构建复杂的网页设计。它会将HTML元素转换为网格的容器(有行有列)。你可以在网格里面添加你想要的子元素。
Jimmy_is_jimmy
2020/10/29
1.3K0
CSS Grid 新手入门
另外,下面一段话摘自A Complete Guide to Grid,对于CSS Grid会有更加清楚地释义
糊糊糊糊糊了
2018/09/28
2.3K0
CSS Grid 新手入门
grid布局了解一下
首先,看一张图,了解一下容器和项目(不难理解,容器就是包在外层的元素,项目就是内部的元素)
用户4793865
2023/01/12
5200
grid布局了解一下
GRID布局
目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。
WindRunnerMax
2020/08/27
1.5K0
相关推荐
最强大的 CSS 布局 —— Grid 布局
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验