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 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
js 调用百度分享功能
Feb 27 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
使用变量动态设置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 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
php7性能提升的原因详解
2019/10/13 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python常见工厂函数用法示例
2018/03/21 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
财务稽核岗位职责
2015/04/13 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
golang操作rocketmq的示例代码
2022/04/06 Golang
Go web入门Go pongo2模板引擎
2022/05/20 Golang