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扩展自写的 UI导航
Jan 13 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
js实现简易拖拽的示例
Oct 26 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将任何格式视频转为flv的代码
2009/09/03 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
道德模范先进事迹
2014/02/14 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
军事博物馆观后感
2015/06/05 职场文书
为自己工作观后感
2015/06/11 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
PyTorch device与cuda.device用法
2022/04/03 Python