JS動(dòng)態(tài)添加Option的幾種方式

在處理表單的時(shí)候，經(jīng)常會(huì)有這樣的需求：給定一定的數(shù)據(jù)來生成某個(gè)select的option，或者更進(jìn)一步，某些option或許預(yù)先選中或者有高亮顯示。

下面我們就來溫習(xí)一下幾種option的創(chuàng)建方式。這個(gè)需求要求某些選項(xiàng)要預(yù)先有高亮顯示，可以通過添加class來處理。

首先定義一個(gè)高亮的class，為了簡單處理，只定義紅色高亮：

<style type="text/css">
.hot-games{
background-color: #f00;
}
</style>

然后預(yù)先定義一些用來生成選項(xiàng)的數(shù)據(jù)：

<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() 構(gòu)造函數(shù)，第二種是通過select.add()函數(shù)，第三種是通過增加innerHTML。下面比較一下三種方式的異同：

首先獲取到select元素：

var gameCat = document.getElementById('cat');

第一種方案，通過new Option()構(gòu)造函數(shù)，該函數(shù)屬0級(jí)DOM，所有瀏覽器都支持：

// 方案1:new Option()構(gòu)造函數(shù)
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)第一個(gè)參數(shù)為顯示的文字，第二個(gè)為value值，如果想設(shè)置其他屬性需要單獨(dú)操作。

第二種方案，通過document.createElement（）來創(chuàng)建選項(xiàng)，然后再設(shè)置選項(xiàng)的屬性。在這里w3c標(biāo)準(zhǔn)是可以設(shè)置option的 label屬性即為顯示文本，但事實(shí)證明FF并不支持，只是給option增加了一個(gè)label屬性。而w3c中定義的readonly的屬性text，在FF中卻可以設(shè)置。那么是否需要判斷瀏覽器類型呢？當(dāng)然不用，該方案代碼如下：

// 方案2:add()
for (var i = 0, j = gameOptions.options.length; i < j; i++) {
var option = document.createElement('option');

try{
// 二級(jí)DOM中該屬性為readonly，但FF確可寫，且可顯示為選項(xiàng)內(nèi)容
option.text = gameOptions.options[i].name;
}catch(e){
// IE支持label，可以直接顯示為選項(xiàng)的文字
option.label = gameOptions.options[i].name;
}

option.value = gameOptions.options[i].value;
option.className = (gameOptions.options[i].isHot == 'true') ? 'hot-games' : '';

// 如果不傳第二個(gè)參數(shù)，FF下會(huì)報(bào)錯(cuò)
gameCat.add(option, null);
}

這里要注意的add()函數(shù)的第二個(gè)參數(shù)，該參數(shù)為before，可以指定選項(xiàng)插到哪個(gè)選項(xiàng)之前，如果為null則插到最后。如果不指定這個(gè)參數(shù)在IE系不會(huì)有問題，FF下會(huì)報(bào)錯(cuò)，提示Not enough arguments,參數(shù)不足，所以最好傳個(gè)null先。

第三種方案，比較少用于select元素上，IE下是無效的，但是動(dòng)態(tài)添加其他元素的孩子時(shí)經(jīng)常用到。當(dāng)然也可以設(shè)置元素屬性后 appendChild(),同方案二。這里要先把select隱藏掉，這樣可以減少瀏覽器重繪次數(shù)，對于display='none'的元素的操作不會(huì)引起重繪或回流。再改變完之后再顯示出來：

// 方案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';

這三種方式最常用的就是第一種了，沒有兼容性問題，其他兩種只是在此作為例子，展示創(chuàng)建option的方法。

轉(zhuǎn)自:http://www.cnblogs.com/jiguang/articles/1894642.html

轉(zhuǎn)載于:https://www.cnblogs.com/johnwonder/archive/2011/03/19/1988784.html

總結(jié)

以上是生活随笔為你收集整理的js动态添加options(转载)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。