js添加select下默认的option的value和text的方法


Posted in Javascript onOctober 19, 2014

<pre name="code" class="java">

jsp 中的下拉框标签:

<s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px; border:0" multiple="true"></s:select>

<pre name="code" class="html"> 
multiple="true"意思是支持选择多个。 

</pre><pre code_snippet_id="487056" snippet_file_name="blog_20141017_5_1612209" name="code" class="javascript">

js中灵活创建select标签下的项的方式:
<pre name="code" class="javascript">var oSelect = $("sjx");<span style="white-space:pre"> </span>//sjx为html或jsp页面上的select标签的id,如果使用Extjs的话,可以用EXT.getDom('sjx')获取标签 
var oOption = document.createElement("OPTION");<span style="white-space:pre"> </span>//js中创建select标签下的OPTION子标签 

oSelect.options.add(oOption);<span style="white-space:pre"> </span>//将新建的OPTION子标签添加到select标签下 

oOption.value = "001";<span style="white-space:pre"> </span>//内容对应的value值 

oOption.innerHTML ="小苹果";<span style="white-space:pre"> </span>//显示的下拉框的内容 

...以此类推

Note:js中的这种方式,在特定的场合是比较有用的,比如:这里请求不返回特定界面,也就是不刷新整个界面。而是采用Ajax方式的异步请求做一些局部的数据请求,那么这个时候下面strut2的方式,就会无效。

<pre name="code" class="java"><pre name="code" class="java">for(...){ 

HashMap<String,Object> map = new HashMap<String,Objcet>(); 

map.put("BM","001"); 

map.put("MC","小苹果"); 

sjxList.add(map); 

}

另外一种方式,也是非常常用的:利用struts2的特性,在Action中定义一个List<Object>变量(以本例为例,命名为:sjxList),并设置set、get方法。

通过一个 HashMap 对象,添加内容,比如:

</pre>返回界面时,将在界面的select下拉框中显示“小苹果”。

<pre name="code" class="html">最简单的一种方式: 
直接在jsp页面手动添加select标签的OPTION项 
<html> 
<body> 
<form> 
<select id="cars" name="cars"> 
<option value="volvo">Volvo</option> 
<option value="binli">Binli</option> 
<option value="mazda" selected="selected">Mazda</option> 
<option value="audi">Audi</option> 
</select> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
JavaScript严格模式详解
Nov 18 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
使用变量动态设置js的属性名
Oct 19 #Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 #Javascript
js读取json的两种常用方法示例介绍
Oct 19 #Javascript
Jquery解析Json格式数据过程代码
Oct 17 #Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 #Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 #Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
php 文章采集正则代码
2009/12/28 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
查找Oracle高消耗语句的方法
2014/03/22 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
js实现带按钮的上下滚动效果
2015/05/12 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
导游词之南京中山陵
2019/11/27 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS