本文共 8266 字，大约阅读时间需要 27 分钟。

<p>在下面所有代码前最好加上这句：</p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> selectId<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElemengById</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'selectId'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">清空select的项</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;">selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> <span style="color: #cc0000;">0</span><span style="color: #339933;">;</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">如果留下第一行的话就是</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;">selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> <span style="color: #cc0000;">1</span><span style="color: #339933;">;</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">向select选项中 加入一个Option</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 2 3 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> varOption <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Option<span style="color: #009900;">(</span>objOptionText<span style="color: #339933;">,</span>objOptionValue<span style="color: #009900;">)</span><span style="color: #339933;">;</span> selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span><span style="color: #009900;">]</span> <span style="color: #339933;">=</span> varOption<span style="color: #339933;">;</span> <span style="font-style: italic; color: #006600;">//或selectId.options.add(varOption);</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">从select选项中 删除一个Option</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;"> <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #cc0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;"><</span>selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>i<span style="color: #009900;">]</span>.<span style="color: #660066;">value</span> <span style="color: #339933;">==</span> objOptionValue<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">(</span>i<span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">设置select中text=”paraText”的第一个Option为选中</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 9 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;"> <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #cc0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;"><</span>selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>i<span style="color: #009900;">]</span>.<span style="color: #660066;">text</span> <span style="color: #339933;">==</span> objOptionText<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>i<span style="color: #009900;">]</span>.<span style="color: #660066;">selected</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span> isExit <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">设置select中value=”paraValue”的Option为选中</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;">selectId.<span style="color: #660066;">value</span> <span style="color: #339933;">=</span> objOptionValue<span style="color: #339933;">;</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">得到select的当前选中项的value</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> currSelectValue <span style="color: #339933;">=</span> selectId.<span style="color: #660066;">value</span><span style="color: #339933;">;</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">得到select的当前选中项的text</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> currSelectText <span style="color: #339933;">=</span> selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>selectId.<span style="color: #660066;">selectedIndex</span><span style="color: #009900;">]</span>.<span style="color: #660066;">text</span><span style="color: #339933;">;</span></pre> </td> </tr></tbody></table> </div> <p><br><span style="color: #ff0000;">得到select的当前选中项的Index</span></p> <div class="wp_syntax"> <table border="0"><tbody><tr> <td class="line_numbers"> <pre>1 </pre> </td> <td class="code"> <pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> currSelectIndex <span style="color: #339933;">=</span> selectId.<span style="color: #660066;">selectedIndex</span><span style="color: #339933;">;</span></pre> </td> </tr></tbody></table> </div>

转载地址：http://wdaji.baihongyu.com/