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 14 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
原生JavaScript实现购物车
Jan 10 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
php中随机显示图片的函数代码
2011/06/23 PHP
php语法检查的方法总结
2019/01/21 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
跟老齐学Python之print详解
2014/09/28 Python
python实现线程池的方法
2015/06/30 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
教师的实习鉴定
2013/12/15 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
企业领导对照检查材料
2014/08/20 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
在校学生证明格式
2015/06/24 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js