首頁 > 開發者 > 網站開發

js中建立html標籤、添加select下預設的option的value和text

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：html   js   jsp   struts2   

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












js中建立html標籤、添加select下預設的option的value和text

                

                    
本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
聯繫我們

            
該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

            

                如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：
                info-contact@alibabacloud.com
                進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •