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 EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 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
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
python中scikit-learn机器代码实例
2018/08/05 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
工地安全检查制度
2014/02/04 职场文书
欢送退休感言
2014/02/08 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
高中语文课后反思
2014/04/27 职场文书
促销活动总结
2014/04/28 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
社区结对共建协议书
2016/03/23 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
关于 Python json中load和loads区别
2021/11/07 Python