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 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 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
一个简单计数器的源代码
2006/10/09 PHP
php5中类的学习
2008/03/28 PHP
PHP抽象类 介绍
2012/06/13 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
经验几则 推荐
2006/09/05 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
医院总经理岗位职责
2014/02/04 职场文书
国防教育标语
2014/10/08 职场文书
未中标通知书
2015/04/17 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
无故旷工检讨书
2015/08/15 职场文书