您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > select option 的問題總結(jié)

select option 的問題總結(jié)

文章來源：365jz.com 點(diǎn)擊數(shù)：304 更新時(shí)間：2011-04-09 10:00 參與評(píng)論

select 是列表型元素中的一個(gè)很重要的代表。總結(jié)下他的一些書寫注意事項(xiàng)。

1.關(guān)于innerHTML ，在ie下不支持innerHTML的形式添加option選項(xiàng)，firefox，chrome是支持的。

2.添加option，使用 ele.options.add(option) ,但是這里的option 可以是new Option(text,value)的形式構(gòu)造的，也可以是通過

原生的函數(shù)document.createElement函數(shù)創(chuàng)建的。此外add的方式不會(huì)覆蓋以前的。option不能是html的形式。

3.選定特定的一個(gè)option的方式 ele.value = option.value;反之，如果當(dāng)前是特定的option的話，

那么ele的值一定就是option.value;

4.獲得選定的option的值還有另一個(gè)方式（我不太推薦）ele.options[ele.selectedIndex].value，這個(gè)盡管復(fù)雜一點(diǎn)，但是說明一個(gè)問題，

即列表型元素的列表項(xiàng)有一個(gè)索引的概念。

附上我研究的code：

1 <!DOCTYPE HTML>
2 <html >
3 <head>
4     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
5     <title></title>
6
7 </head>
8 <body>
9     <select name="test" id="test">
10     <option value="etcyby">hehe</option>
11     </select>
12     <script type="text/javascript">
13     function $(id){
14         return document.getElementById(id);
15     }
16     function render(){
17         for(var i = 0 ;i < 100;i++){
18             var ele = document.createElement('option');
19                 ele.text ='etcyby' + i;
20                 ele.value  = i;
21             $('test').options.add(ele);
22         }
23         $('test').value = '99'
24         //alert($('test').options[$('test').selectedIndex].value);
25     }
26     function render2(){
27         $('test').innerHTML = '<option value="etcyby">hehe</option>';
28     }
29     render();
30     </script>
31 </body>

32 </html>

如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇