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 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
Bootstrap插件全集
Jul 18 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
JavaScript从原型到原型链深入理解
Jun 03 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
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python实现图片批量压缩程序
2018/07/23 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python生成requirements.txt的两种方法
2019/09/18 Python
如何用python免费看美剧
2020/08/11 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
数据库方面面试题
2012/04/22 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
国培教师自我鉴定
2014/02/12 职场文书
汉语言文学职业规划
2014/02/14 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
科级干部培训心得体会
2016/01/06 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记