js中创建html标签、添加select下默认的option的value和text、删除select元素节点下所有的OPTION节点
来源:互联网 发布:电影采集站源码 编辑:程序博客网 时间:2024/05/17 01:05
<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; }
0 0
- js中创建html标签、添加select下默认的option的value和text、删除select元素节点下所有的OPTION节点
- 【代码库】删除select元素节点下所有的OPTION节点
- select标签下option标签里value属性有什么用以及和text的区别
- JQuery 获得select下option节点的文本值和value值
- IE下 JS添加Select元素的option问题
- 删除select元素里面的所有option
- select标签下option标签里value属性有什么用以及和text的区别(转)
- JS select option 元素的大批量添加
- js实例,获取选中select标签的value和option text值
- 输出所有select元素下的所有option元素中对应的文本内容
- js删除struts1生成的select下的option
- select 下的option删除,复制,修改
- HTML select标签 获取选中的option的value及Text内容
- 根据select中option的text或value来选中
- jQuery获取Select option 选择的Text和Value
- jQuery获取Select option 选择的Text和 Value(转)
- jQuery获取Select option 选择的Text和Value
- jQuery获取Select option 选择的Text和 Value(转)
- bzoj 1789: [Ahoi2008]Necklace Y型项链
- Hibernate使用中间表完成单向多对多关联关系的配置和级联操作示例
- 懒人成就中国O2O,你怎么看
- LayoutInflater的使用
- Pinyin4j的基本用法
- js中创建html标签、添加select下默认的option的value和text、删除select元素节点下所有的OPTION节点
- WebSphere 6.1 程序 更新文件 替换或添加单个文件
- asterisk sip trunk配置步骤
- 观察者设计模式
- BZOJ 1087 状压DP
- 那些好用的iOS开发工具
- wap web页面保持比例不被缩放摇一摇实例
- c# RegistryKey注册表操作
- 双系统下卸载ubuntu(转)