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 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
ztree+ajax实现文件树下载功能
May 18 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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python Pillow Image Invert
2019/01/22 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
基于python实现雪花算法过程详解
2019/11/16 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
应届生个人求职信模板
2013/11/26 职场文书
学生党支部先进事迹
2014/02/04 职场文书
视光学专业自荐信
2014/06/24 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
在职员工证明书
2014/09/19 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
刮痧观后感
2015/06/05 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python