js中建立html標籤、加入select下預設的option的value和text、刪除select元素節點下全部的OPTION節點

最後更新：2017-07-20 來源：互聯網

上載者：User

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

標籤：set style 頁面使用最簡收藏 add val art

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

方法一：

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

    $('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;      }

js中建立html標籤、加入select下預設的option的value和text、刪除select元素節點下全部的OPTION節點

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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