js动态添加options(转载)
JS動態添加Option的幾種方式
在處理表單的時候，經常會有這樣的需求：給定一定的數據來生成某個select的option，或者更進一步，某些option或許預先選中或者有高亮顯示。
下面我們就來溫習一下幾種option的創建方式。這個需求要求某些選項要預先有高亮顯示，可以通過添加class來處理。
首先定義一個高亮的class，為了簡單處理，只定義紅色高亮：
<style type="text/css">.hot-games{
background-color: #f00;
}
</style>
然后預先定義一些用來生成選項的數據：
<script type="text/javascript">
var gameOptions = {
"options" : [
{
"name" : "魔獸世界",
"value" : "50007361",
"isHot" : "false"
},
{
"name" : "龍之谷",
"value" : "50007937",
"isHot" : "false"
},
{
"name" : "永恒之塔",
"value" : "50007385",
"isHot" : "true"
},
{
"name" : "奇跡世界",
"value" : "50007800",
"isHot" : "false"
}
]
};
</script>
這里是select元素，需要制定id和name屬性：
<select id="cat" name="cat" style="width:130px;"></select>大致有三種方案可以增加option，一種是通過new Option() 構造函數，第二種是通過select.add()函數，第三種是通過增加innerHTML。下面比較一下三種方式的異同：
首先獲取到select元素：
var gameCat = document.getElementById('cat');第一種方案，通過new Option()構造函數，該函數屬0級DOM，所有瀏覽器都支持：
// 方案1:new Option()構造函數for(var i=0, j=gameOptions.options.length; i<j; i++){
gameCat.options[i] = new Option(gameOptions.options[i].name, gameOptions.options[i].value);
if(gameOptions.options[i].isHot == 'true'){
gameCat.options[i].className = 'hot-games';
}
}
new Option(text, value)第一個參數為顯示的文字，第二個為value值，如果想設置其他屬性需要單獨操作。
第二種方案，通過document.createElement（）來創建選項，然后再設置選項的屬性。在這里w3c標準是可以設置option的 label屬性即為顯示文本，但事實證明FF并不支持，只是給option增加了一個label屬性。而w3c中定義的readonly的屬性text，在FF中卻可以設置。那么是否需要判斷瀏覽器類型呢？當然不用，該方案代碼如下：
// 方案2:add()for (var i = 0, j = gameOptions.options.length; i < j; i++) {
var option = document.createElement('option');
try{
// 二級DOM中該屬性為readonly，但FF確可寫，且可顯示為選項內容
option.text = gameOptions.options[i].name;
}catch(e){
// IE支持label，可以直接顯示為選項的文字
option.label = gameOptions.options[i].name;
}
option.value = gameOptions.options[i].value;
option.className = (gameOptions.options[i].isHot == 'true') ? 'hot-games' : '';
// 如果不傳第二個參數，FF下會報錯
gameCat.add(option, null);
}
這里要注意的add()函數的第二個參數，該參數為before，可以指定選項插到哪個選項之前，如果為null則插到最后。如果不指定這個參數在IE系不會有問題，FF下會報錯，提示Not enough arguments,參數不足，所以最好傳個null先。
第三種方案，比較少用于select元素上，IE下是無效的，但是動態添加其他元素的孩子時經常用到。當然也可以設置元素屬性后 appendChild(),同方案二。這里要先把select隱藏掉，這樣可以減少瀏覽器重繪次數，對于display='none'的元素的操作不會引起重繪或回流。再改變完之后再顯示出來：
// 方案3：innerHTML// IE無效，FF可用
gameCat.style.display = 'none';
for (var i = 0, j = gameOptions.options.length; i < j; i++) {
var isHot = (gameOptions.options[i].isHot == 'true') ? ' ' : '';
gameCat.innerHTML += '<option value='+gameOptions.options[i].value+isHot+'>'+gameOptions.options[i].name+'</option>';
}
gameCat.style.display = 'block';
這三種方式最常用的就是第一種了，沒有兼容性問題，其他兩種只是在此作為例子，展示創建option的方法。
轉自:http://www.cnblogs.com/jiguang/articles/1894642.html
轉載于:https://www.cnblogs.com/johnwonder/archive/2011/03/19/1988784.html
總結
以上是生活随笔為你收集整理的js动态添加options(转载)的全部內容，希望文章能夠幫你解決所遇到的問題。
