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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
JS根据生日算年龄的方法
May 05 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
使用变量动态设置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
数据库相关问题
2006/10/09 PHP
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python中title()方法的使用简介
2015/05/20 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python常见排序算法基础教程
2017/04/13 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
python遍历路径破解表单的示例
2020/11/21 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
网络技术支持面试题
2013/04/22 面试题
2014年情人节活动方案
2014/02/16 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
预防煤气中毒方案
2014/06/16 职场文书
搞笑结婚保证书
2015/05/08 职场文书
出生证明范本
2015/06/15 职场文书
分家协议书范本
2016/03/22 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Java详细解析==和equals的区别
2022/04/07 Java/Android