zoukankan      html  css  js  c++  java
  • 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="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节点

    方法一:

    Js代码  收藏代码

        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)

     
    Js代码  收藏代码

        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)

    Js代码  收藏代码
    1.     $('SearchqqueryColumn').options.length = 0;
    Js代码  收藏代码

        <script>  
        function clearOption()  
        {  
            document.getElementById("testSelect").options.length = 0;  
        }  
        </script>   

     (那右边的Select中的全部option移到左边的Select)实现例如以下:

    Js代码  收藏代码
    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;  
        }  



  • 相关阅读:
    Redis其他知识
    Mybatis的sql语句操作
    Redis
    mybatis插件原理
    mybatis工作原理
    Mybatis逆向工程
    mybatis缓存机制
    Mybatis查询
    zabbix api添加主机
    jenkins + bitbucket 实现 pr自动构建及build状态通知
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7212605.html
Copyright © 2011-2022 走看看