JQuery获取Select中option中的值，并由a标签传值

最新推荐文章于 2021-06-24 13:37:15 发布

原创最新推荐文章于 2021-06-24 13:37:15 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用JSTL在Java Web应用中动态生成下拉菜单，并通过JavaScript捕获选中项，实现与后台服务器的数据交互。重点探讨了在select元素中利用forEach遍历集合，以及通过jQuery获取option值的方法。

过程坎坷，直接肝代码

我需要用jstl从后台服务器上获取得到的数据ArrayList<String>，即此处的singleSize，利用forEach循环通过select输出，但一直苦于没有什么好方法可以获取到option中的值还得是通过a标签传递到后台。

<select id="select">
	<c:forEach items="${list }" var="plist">
	      <option value="${plist }">${plist }</option>
	</c:forEach>
</select>

<a href="javascript:;" onClick="fun()">跳转</a>

然后js逻辑如下：

<script type="text/javascript">
	function fun(){
		var option = $("#  option:selected");
		var color = option1.val();
		var size = option2.val();
		location.href="addCart?color="+color+"&size="+size;
	}
</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CCCAAAAFFFFF

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jquery--select获取选中的option(类型为multiple，使用val()方法)，并更改form表单input内容

杰儿__er 的博客

02-24

1067

jquery--select获取选中的option(类型为multiple，使用val()方法)，并更改form表单input内容

JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参

10-28

selected').val()获取的，其中$(this)代表当前发生change事件的select标签元素，.children('option:selected')选择当前被选中的option子元素，.val()方法则获取该option元素的value属性值。紧接着，在弹出警告框后...

参与评论您还未登录，请先登录后发表或查看评论

Query获取Select元素，并选择的Text和Value: 转

小楼听风雨

11-07

265

Query获取Select元素，并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text ...

jQuery获取select选中的option的value值实现方法

10-21

下面小编就为大家带来一篇jQuery获取select选中的option的value值实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

用jquery获取select标签中选中的option值及文本的示例

10-18

下面小编就为大家分享一篇用jquery获取select标签中选中的option值及文本的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

jquery获得select option的值和对select option的操作

weixin_34349320的博客

08-27

获取Select ：获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selected...

精选资源

动态给select添加option失败的问题原因及解决

01-08

然后发现并没有变化，查资料后才发现，如果要用jQuery给select标签动态添加option，需要这样写： $(#day).append(+i+); 采用上面那种写法时，应该用var obj=document.getElementById(“day”)来获取select标签，...

jQuery添加options点击事件并传值实例代码

10-22

在本例中，我们将探讨如何利用jQuery来为一个下拉菜单（select元素）中的options元素添加点击事件，并实现值的传递。首先，需要明确，一个下拉菜单通常由select元素及其内部的option元素组成，每个option元素可以...

jQuery模拟select实现下拉菜单功能

11-25

hiddenInput: '#optionHidden', //隐藏的input获取选中后的值，供表单提交时传值 getOption: '#sOptionBtn', callback: function(){} //回调函数，当选项被选择时触发 }, options || {}); return this.each...

怎样用jQuery拿到select中被选中的option的值

weixin_30851867的博客

06-22

368

1、首先要保证select中每一个option标签都有value属性； 2、jquery的写法 1 $('#sele').val()//这里假设select的id是sele，这样可以获取当前选中的option的value 3、刚开始没有选择的时候默认的是第一个option的value值； 4、要测试的话可以写一个change事件，也就是每一...

在select标签中添加a标签

lxw1844912514的博客

11-20

1925

<select id="" onchange="window.location=this.value">　　 <option >请选择</option> 　　<option value="https://www.baidu.com">百度</option> 　　<opt...

select标签如何传递选中option的value值与text值

最新发布

11-07

<think>我们被要求回答：在JSP中获取选择的option的value值的方法根据引用，有几种方法： 1. 使用JavaScript原生方法（引用[3]和引用[4]） 2. 使用jQuery（引用[1]） 3. 在表单提交后，在另一个JSP页面通过request.getParameter获取（引用[2]） 4. 在JSP中结合EL表达式获取（引用[5]）注意：用户明确在JSP中获取，所以我们将集中在JSP相关的技术。根据用户的问题，他可能是在同一个页面或者提交到另一个页面进行处理。方法一：通过表单提交到另一个JSP页面（服务器端获取）步骤： 1. 在表单中，select元素设置name属性，例如name="fruit_goods"（引用[2]示例） 2. 表单提交后，在目标JSP页面（如verify_goods.jsp）中使用request.getParameter获取。示例代码：页面1（表单页面）： ```jsp <form method="post" action="target.jsp"> <select name="mySelect"> <option value="opt1">Option 1</option> <option value="opt2">Option 2</option> </select> <input type="submit" value="提交"> </form> ``` 目标页面（target.jsp）： ```jsp <% request.setCharacterEncoding("UTF-8"); String selectedValue = request.getParameter("mySelect"); %> 您选择的值是：<%=selectedValue%> ``` 方法二：在同一个页面通过JavaScript获取（客户端获取）如果用户希望在同一个页面获取（不提交表单），则可以使用JavaScript。示例（引用[3]和[4]）： ```html <select id="mySelect" onchange="getValue()"> <option value="A">第一个option</option> <option value="B">第二个option</option> </select> <script> function getValue() { var selObj = document.getElementById("mySelect"); var sIndex = selObj.selectedIndex; var sValue = selObj.options[sIndex].value; alert("选中的值: " + sValue); } </script> ``` 方法三：使用jQuery（需要引入jQuery库） ```html <select id="mySelect"> <option value="A">A</option> <option value="B">B</option> </select> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $("#mySelect").change(function() { var selectedValue = $(this).val(); alert(selectedValue); }); </script> ``` 方法四：在JSP页面中使用EL表达式获取（适用于在表单提交后返回同一页面或转发的情况）如果我们在服务器端处理了表单，然后将结果返回给同一个页面（比如通过ModelAndView添加属性），则可以使用EL表达式。例如，在Spring MVC中，控制器将选中的值放入model，然后在JSP中显示：控制器： ```java @RequestMapping("/somePage") public ModelAndView handleForm(@RequestParam("mySelect") String selectedValue) { ModelAndView mav = new ModelAndView("formPage"); // 返回原来的表单页面 mav.addObject("selectedValue", selectedValue); return mav; } ``` 在JSP中（formPage.jsp）： ```jsp <c:if test="${not empty selectedValue}"> 您选择的值是：${selectedValue} </c:if> ``` 或者如果是在同一个请求中，也可以直接使用请求属性（不使用MVC框架时）： ```jsp <% String selectedValue = (String) request.getAttribute("selectedValue"); if (selectedValue != null) { %> 您选择的值是：<%=selectedValue%> <% } %> ``` 总结：根据不同的需求（是否提交表单、是否使用框架等），可以选择不同的方法。注意：引用[5]提到了在JS中获取ModelAndView的值，但是要注意，JS是客户端脚本，而ModelAndView的值是在服务器端处理的，所以只能通过将值输出到页面中的某个元素或变量中，然后JS才能访问。例如，在JSP中： ```jsp <input type="hidden" id="hiddenSelectedValue" value="${selectedValue}" /> ``` 然后在JS中： ```js var selectedValue = document.getElementById("hiddenSelectedValue").value; ``` 或者直接： ```js var selectedValue = '${selectedValue}'; ``` 但是要注意，如果${selectedValue}是字符串，要确保它不会包含单引号，否则JS会出错（可以转义，但通常由框架处理）。根据用户的需求，他可能需要的是在表单提交后服务器端获取（方法一）或者同一个页面用JS获取（方法二、三）。如果使用框架，则可能用方法四。因此，我们给出几种常见情况的解决方案。 </think>在 JSP 中获取下拉框（`<select>`）选中的 option 的 value 值，主要有以下几种方法： --- ### 方法一：通过表单提交后在服务器端获取（推荐）适用于表单提交到其他 JSP/Servlet 的场景。 ```jsp  <form action="result.jsp" method="post"> <select name="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> </select> <input type="submit" value="提交"> </form> ``` ```jsp  <% request.setCharacterEncoding("UTF-8"); String selectedValue = request.getParameter("fruit"); // 直接获取 value %> 选中的值：<%= selectedValue %> ``` - **原理**：表单提交时，浏览器会将选中的 option 的 `value` 属性值传输到服务器端。 - **注意**：需确保表单的 `method="post"` 或 `method="get"` 与接收端匹配 [^2][^4]。 --- ### 方法二：使用 JavaScript 在客户端实时获取适用于无需提交表单的场景（如联动菜单）。 ```jsp <select id="fruitSelect" onchange="getValue()"> <option value="apple">苹果</option> <option value="banana">香蕉</option> </select> <script> function getValue() { const selectObj = document.getElementById("fruitSelect"); const selectedValue = selectObj.value; // 直接获取 value alert("选中的值：" + selectedValue); } </script> ``` - **原生 JS 替代方案**： ```javascript const index = selectObj.selectedIndex; const value = selectObj.options[index].value; // 通过索引获取 [^3][^4] ``` --- ### 方法三：使用 EL 表达式获取后端绑定的值适用于 Spring MVC 等框架中通过 `ModelAndView` 传值。 ```java // 后端 Controller (Spring MVC) modelAndView.addObject("selectedFruit", "apple"); // 绑定值到模型 ``` ```jsp  ${selectedFruit}  ``` - 若需在 JS 中使用： ```javascript const value = '${selectedFruit}'; // EL 表达式嵌入 JS [^5] ``` --- ### 注意事项 1. **确保 option 有 value 属性** 若未设置 `value`，浏览器会提交 option 的文本内容而非预期值 [^1]。 2. **中文乱码问题** 在接收页面添加 `request.setCharacterEncoding("UTF-8")` [^2]。 3. **动态生成选项** 若选项由 JSP 循环生成（如从数据库读取），需保证 `value` 正确绑定数据。 --- ### 选择建议 - 需提交数据到服务器 → **方法一** - 需实时响应前端操作 → **方法二** - 基于 MVC 框架开发 → **方法三**