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 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JS画线(实例代码)
Nov 20 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
JS script脚本中async和defer区别详解
Jun 24 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实现根据词频生成tag云的方法
2015/04/17 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php格式文件打开的四种方法
2018/02/24 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
web打印小结
2017/01/11 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
python列表与元组详解实例
2013/11/01 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
python的依赖管理的实现
2019/05/14 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
详细分析Python collections工具库
2020/07/16 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
中科创达面试题
2016/12/28 面试题
单位在职证明书
2014/09/11 职场文书
物流业务员岗位职责
2015/04/03 职场文书
经费申请报告
2015/05/15 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript