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中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 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
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
如何基于线程池提升request模块效率
2020/04/18 Python
详解python metaclass(元类)
2020/08/13 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
高职教师岗位职责
2013/12/24 职场文书
干部个人考察材料
2014/12/24 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书