js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点
<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"意思是支持选择多个。
js中灵活创建select标签下的项的方式:
var oSelect = $("sjx");<span style="white-space:pre"> //sjx为html或jsp页面上的select标签的id,假设使用Extjs的话,能够用EXT.getDom('sjx')获取标签
var oOption = document.createElement("OPTION"); //js中创建select标签下的OPTION子标签
oSelect.options.add(oOption);<span style="white-space:pre"> //将新建的OPTION子标签加入到select标签下
oOption.value = "001";<span style="white-space:pre"> //内容相应的value值
oOption.innerHTML ="小苹果";<span style="white-space:pre"> //显示的下拉框的内容
...以此类推
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><pre code_snippet_id="487056" snippet_file_name="blog_20141017_5_1612209" name="code" class="javascript"><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>
删除select标签节点下全部的OPTION节点
方法一:
function DeleteOptions()
{
var obj = document.getElementsByTagName("select")[0];
var selectOptions = obj.options;
var optionLength = selectOptions.length;
for(var i=0;i <optionLength;i++)
{
obj.removeChild(selectOptions[0]);
}
}
方法二:(那右边的Select中的全部option移到左边的Select)
function MoveAllRightBtn(){
var columnlength=$('queryColumn').length;
var TempText;
var TempValue;
for(var i=0;i<columnlength;i++){
TempText=$('queryColumn').options[i].text;
TempValue=$('queryColumn').options[i].value;
$('queryColumn').remove(i);
$('SearchqqueryColumn').options.add(new Option(TempText,TempValue));
}
}
以上两个方法都不够好!由于它们一次性都冊除不了,由于删除了一个它的$('queryColumn')在option的序号就变了!
简单最优的方法例如以下:(仅仅需将length置0)
$('SearchqqueryColumn').options.length = 0;
<script>
function clearOption()
{
document.getElementById("testSelect").options.length = 0;
}
</script>
(那右边的Select中的全部option移到左边的Select)实现例如以下:
function MoveAllRightBtn(){
var columnlength=$('queryColumn').options.length;
var TempText;
var TempValue;
for(var i=0;i<columnlength;i++){
TempText=$('queryColumn').options[i].text;
TempValue=$('queryColumn').options[i].value;
$('SearchqqueryColumn').options.add(new Option(TempText,TempValue));
}
$('queryColumn').options.length = 0;
}
js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点的更多相关文章
- 在js中拼接<a>标签,<a>标签中含有onclick事件,点击无法触发该事件
我们在<a>标签中添加事件一般是onclick="editUser()" 这样添加,在html页面上是行的通的 但是如何你是在js中拼接<a>标签并在< ...
- Three.js中的div标签跟随(模型弹框)
目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...
- springboot下html的js中使用shiro标签功能
在js中直接使用shiro标签是不行的 比如 下面有个小技巧
- 【翻译】在Ext JS中创建特定主题的重写
Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类.这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为.在本文,将展示 ...
- js中的script标签属性
HTML <script> 元素用于嵌入或引用可执行脚本. 在html中插入一个script标签 <script src="index.js" sync cros ...
- js中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...
- JS中创建多个相同的变量出现的问题
在做轮播图的时候出现了一个问题:如果定义两个完全相同的变量会发生什么: 1.两个全局变量: var num = 10; var num =100; 这种情况下很明显输出num的话会是100,但是内存中 ...
- 在js中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'H ...
- 在html中创建自定义标签
创建并使用自定义标签 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElem ...
随机推荐
- PAT Basic 1072
1072 开学寄语 下图是上海某校的新学期开学寄语:天将降大任于斯人也,必先删其微博,卸其 QQ,封其电脑,夺其手机,收其 ipad,断其 wifi,使其百无聊赖,然后,净面.理发.整衣,然后思过.读 ...
- SQL Server on Red Hat Enterprise Linux
本文从零开始一步一步介绍如何在Red Hat Enterprise Linux上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一. 创 ...
- 第四章 vim 可视模式
第四章 vim 可视模式 vim的可视模式允许我们选中一块文本区域并进行操作 3种不同的可视模式 分为 操作字符文本 行文本 块文本 .命令用来重复执行可视模式中的命令 只有在操作面 ...
- acm之简单博弈 Nim Bash Wythoff
前些日子我打算开了博弈基础,事后想进行总结下 一句话就是分析必胜或必败,异或为0. 以下内容来自转载: Nim游戏的概述: 还记得这个游戏吗?给出n列珍珠,两人轮流取珍珠,每次在某一列中取至少1颗珍珠 ...
- rabbitmq php扩展amqp安装
configure: error: Please reinstall the librabbitmq distribution itself or (re)install librabbitmq de ...
- 【Luogu】P2831愤怒的小鸟(手算抛物线+状压DP)
题目链接 设f[s]表示二进制集合表示下的s集合都打掉用了多少小鸟. 预处理出lne[i][j]表示i.j确定的抛物线能打掉的小鸟集合. 于是就有f[s|lne[i][j]]=min(f[s|lne[ ...
- 解决 sqlalchemy 报错:(1193, "Unknown system variable 'tx_isolation'")
1出现此报错的原因是使用的mysql8.0 以前用的是:tx_isolation 现在用是: transaction_isolation a.通过升级 sqlalchemy 的方法可以解决此问题, p ...
- 【DFS序+线段树区间更新区间求最值】HDU 5692 Snacks
http://acm.hdu.edu.cn/showproblem.php?pid=5692 [思路] 每更新一个点,子树的所有结点都要更新,所以是区间更新 每查询一个点,子树的所有结点都要查询,所以 ...
- hdu 2100
#include<stdio.h> #include<string.h> char a[300],b[300]; int a1[300],b1[300]; int main() ...
- HDU 2197 本源串
如果一个串能完全由其子串组成,那么这个串就不是本源串 求长度为n的本源串的个数. 由定义一个串如果不是本源串,那么他的长度一定是组成其子本源串的长度的(>=1) 整数倍. 那么长度为n的串总个数 ...