<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）




  1.     $('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节点的更多相关文章
	

    
								
  1. 在js中拼接<a>标签,<a>标签中含有onclick事件，点击无法触发该事件
		
    我们在<a>标签中添加事件一般是onclick="editUser()" 这样添加,在html页面上是行的通的 但是如何你是在js中拼接<a>标签并在< ...
    
		
    2. 
						
  2. Three.js中的div标签跟随(模型弹框)
		
    目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...
    
		
    3. 
						
  3. springboot下html的js中使用shiro标签功能
		
    在js中直接使用shiro标签是不行的 比如 下面有个小技巧
    
		
    4. 
						
  4. 【翻译】在Ext JS中创建特定主题的重写
		
    Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类.这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为.在本文,将展示 ...
    
		
    5. 
						
  5. js中的script标签属性
		
    HTML <script> 元素用于嵌入或引用可执行脚本. 在html中插入一个script标签 <script src="index.js" sync cros ...
    
		
    6. 
						
  6. js中创建命名空间的几种写法
		
    在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...
    
		
    7. 
						
  7. JS中创建多个相同的变量出现的问题
		
    在做轮播图的时候出现了一个问题:如果定义两个完全相同的变量会发生什么: 1.两个全局变量: var num = 10; var num =100; 这种情况下很明显输出num的话会是100,但是内存中 ...
    
		
    8. 
						
  8. 在js中创建命名空间的几种写法
		
    在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子:   var sayHello = function() { return 'H ...
    
		
    9. 
						
  9. 在html中创建自定义标签
		
    创建并使用自定义标签 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElem ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 循环链表的C风格实现（单向）
			
    头文件: #ifndef _CIRCLELIST_H_ #define _CIRCLELIST_H_ typedef void CircleList; // typedef struct _tag_C ...
    
			
    2. 
						
  2. Android自动化测试Uiautomator--UiDevice接口简介
			
    Uiautomator主要分为UiDevice, UiObject, UiScrollable, UiSelector, UiCollection几个类. getUiDevice()方法可以得到一个U ...
    
			
    3. 
						
  3. [android开发篇] [应用组件]Intent 和 Intent 过滤器
			
    https://developer.android.com/guide/components/intents-filters.html Intent 是一个消息传递对象,您可以使用它从其他应用组件请求 ...
    
			
    4. 
						
  4. Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) 一夜回到小学生
			
    我从来没想过自己可以被支配的这么惨,大神讲这个场不容易掉分的啊 A. Carrot Cakes time limit per test 1 second memory limit per test 2 ...
    
			
    5. 
						
  5. 【JavaScript 4—基础知识点】：函数
			
    导读:函数这个东西,从VB开始就一直在用,不过那时候一般写不出来自己的函数或者类,觉得最高大上的,就是调用API函数了.现在,学习到了JavaScript,总结总结函数,显得很有必要.这篇文章,就从最 ...
    
			
    6. 
						
  6. POJ3630/HDU-1671 Phone List，字典树静态建树！
			
    Phone List POJ动态建树TLE了~~~ 题意:拨打某个电话时可能会因为和其他电话号码的前几位重复而导致错误,现在给出一张电话单,求是否有某个电话是其他电话的前缀.是则输出NO,否则输出YE ...
    
			
    7. 
						
  7. BZOJ 1443 [JSOI2009]游戏Game ——博弈论
			
    好题. 首先看到棋盘,先黑白染色. 然后就是二分图的经典模型. 考虑最特殊的情况,完美匹配,那么先手必胜, 因为无论如何,先手走匹配边,后手无论走哪条边,总有对应的匹配边. 如果在不在最大匹配中出发, ...
    
			
    8. 
						
  8. Spring JdbcTemplate 与 事务管理 学习
			
    Spring的JDBC框架能够承担资源管理和异常处理的工作,从而简化我们的JDBC代码, 让我们只需编写从数据库读写数据所必需的代码.Spring把数据访问的样板代码隐藏到模板类之下, 结合Sprin ...
    
			
    9. 
						
  9. Elasticsearch 禁止Body覆盖URL中的参数
			
    以通过设置参数rest.action.multi.allow_explicit_index为false来关闭覆盖功能. 这个设置会对所有的节点起作用,设置方法如下: 在config/elasticse ...
    
			
    10. 
						
  10. .net面试题汇总-第二篇
			
    本篇主要关注下,.net面试题中经常用的算法问题 1.有一群猴子,它们每天要吃桃子,它们第一天吃的数量是总量的一半再多一个,第二天吃的是第一天剩下的一半再多一个,第三天吃的是第二天剩下的一半多一个,以 ...
    
			
    11.