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 原型继承介绍
Aug 30 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
canvas知识总结
Jan 25 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
js前端设计模式优化50%表单校验代码示例
Jun 21 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
php学习笔记 数组的常用函数
2011/06/13 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python 自定义对象的打印方法
2019/01/12 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
经管应届生求职信
2013/11/17 职场文书
文员岗位职责范本
2014/03/08 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书