js中創建html標簽、加入select下默認的option的value和text、刪除select元素節點下全部的OPTION節點
阿新 • • 發佈：2017-07-20
bsp art 利用 scrip -m script space multipl ng-
以上兩個方法都不夠好！由於它們一次性都冊除不了，由於刪除了一個它的$(‘queryColumn‘)在option的序號就變了！
(那右邊的Select中的全部option移到左邊的Select)實現例如以下： Js代碼
<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）
$('SearchqqueryColumn').options.length = 0;
<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節點