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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
JQuery for与each性能比较分析
May 14 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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的历史和优缺点
2006/10/09 PHP
投票管理程序
2006/10/09 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
AngularJS中的作用域实例分析
2018/05/16 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
教师岗位聘任书范文
2014/03/29 职场文书
体育比赛口号
2014/06/09 职场文书
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python