在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了。

demo.jsp文件


  1. <select id="selecttype" name"type">
  2. <option value="" selected="selected">请选择</option>
  3. <c:forEach items="${typeList}" var="typeList">
  4. <option value="${typeList.id}">${typeList.name}</option>
  5. <c:forEach>
  6. </select>

如上代码,想过用设置隐藏域获取文本内容typeList.name,将隐藏域放在forEach循环内。

<input id="selecttypename" type="hidden" name="typename" value="${typeList.name}" />

后台接收typename为空值,也许遍历循环的时候把隐藏域也循环出多份了,而同一个Form表单中不能有多个相同name属性的标签。

隐藏域放哪里好呢?思考无果后开始查资料,最后找到解决方案。

JavaScript中有一个change事件

JavaScript代码


  1. $("#selecttype").change(function(){
  2. $("selecttypename").val($("#selecttype").find("option:selected").text());
  3. });

当触发select框选项改变的条件,将框内选中的文本内容传递给隐藏域的value值,这样隐藏域也能随自己心意放在合适的位置了。

关于java 获取 html select标签 下拉框 option 文本内容 隐藏域的更多相关文章

  1. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  2. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  3. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  4. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  5. selenium select 选择下拉框

    实战百度首页设置,浏览偏好设置. 打开首页,在非登录的情况下,查看分析页面元素,我们可以看到,我们首先要点击的是设置, 接着点击,搜索设置, 然后select选择下拉框. select_by_inde ...

  6. 【selenium】基于python语言,如何用select选择下拉框

    在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...

  7. jq select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性

    select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...

  8. JavaScript下拉框去除重复内容

    下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/java ...

  9. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

随机推荐

  1. Alpha冲刺——第七天

    Alpha第七天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...

  2. springboot+vue+element:echarts开发遇见问题---vue前端(二)

    <template> <u-grid> <u-grid-item caption="服务使用统计排行"> <div class=" ...

  3. 移动平台的meta标签

    这个meta在移动平台上有非常神奇的地方. 1. <meta name="viewport" content="width=device-width; initia ...

  4. windows远程连接设置

    1.设置整个服务器只允许一个连接. 使用组策略管理gpedit.msc, 计算机配置>管理模板>windows组件 >终端服务>限制连接数量,设为已启动,数量设置为1. 此设置 ...

  5. java和mysql的length()区别及char_length()

    一. mysql里面的有length和char_length两个长度函数,区别在于: length: 一个汉字是算三个字符,一个数字或字母算一个字符. char_length: 不管汉字还是数字或者是 ...

  6. Java web 强制301跳转

    response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY); response.setHeader("Location" ...

  7. 【vim】vim常用命令

    移动: h 或 向左箭头键(←)  #光标向左移劢一个字符 j 或 下箭头键(↓)    #光标向下移劢一个字符 k 或 向上箭头键(↑)    #光标向上移劢一个字符 l 或 向右箭头键(→)    ...

  8. 弱网络模拟测试工具---易测app

    易测功能介绍   易测是一款基于无线客户端研发场景的通用测试工具, 它通过在研发人员的自持机上提供各种辅助能力&标准化的专项测试服务来提升研发质量&效率.   易测app是阿里巴巴做的 ...

  9. 第200天:js---常用string原型扩展

    一.常用string原型扩展 1.在字符串末尾追加字符串 /** 在字符串末尾追加字符串 **/ String.prototype.append = function (str) { return t ...

  10. WebClient的使用

    1.下载网页源码: private void button1_Click(object sender, EventArgs e) { string url = textBox1.Text; strin ...