HTML中的<select>标签如何设置默认选中的选项

怼烎@ 2022-06-17 14:00 420阅读 0赞

转自：http://www.cnblogs.com/besty/p/4094951.html

方法有两种。

第一种通过<select>的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。

第二种为通过前端js来控制选中的项: 由 www.169it.com 搜集整理

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(0,0,0); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px; line-height:25.2px"> 
 <tbody> 
  <tr> 
   <td style="font-size:14px; border:1px solid silver; border-collapse:collapse; padding:3px"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> </td> 
   <td style="font-size:14px; border:1px solid silver; border-collapse:collapse; padding:3px"> 
    <div> 
     <code>&lt;</code>&nbsp; 
     <code>script</code>&nbsp;&nbsp; 
     <code>type</code>&nbsp; 
     <code>=</code>&nbsp; 
     <code>"text/javascript"</code>&nbsp; 
     <code>&gt;</code> 
    </div> 
    <div> 
     <code>function change(){ </code> 
    </div> 
    <div> 
     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     <code>document.getElementById("sel")[2].selected=true;</code> 
    </div> 
    <div> 
     <code>}</code> 
    </div> 
    <div> 
     <code>&lt;/</code>&nbsp; 
     <code>script</code>&nbsp; 
     <code>&gt;</code> 
    </div> 
    <div> 
     <code>&lt;</code>&nbsp; 
     <code>select</code>&nbsp;&nbsp; 
     <code>id</code>&nbsp; 
     <code>=&nbsp;</code>&nbsp; 
     <code>"sel"</code>&nbsp; 
     <code>&gt;</code> 
    </div> 
    <div> 
     <code>&lt;</code>&nbsp; 
     <code>option</code>&nbsp;&nbsp; 
     <code>value</code>&nbsp; 
     <code>=</code>&nbsp; 
     <code>"1"</code>&nbsp; 
     <code>&gt;1&lt;/</code>&nbsp; 
     <code>option</code>&nbsp; 
     <code>&gt;</code> 
    </div> 
    <div> 
     <code>&lt;</code>&nbsp; 
     <code>option</code>&nbsp;&nbsp; 
     <code>value</code>&nbsp; 
     <code>=</code>&nbsp; 
     <code>"2"</code>&nbsp; 
     <code>&gt;2&lt;/</code>&nbsp; 
     <code>option</code>&nbsp; 
     <code>&gt;</code> 
    </div> 
    <div> 
     <code>&lt;</code>&nbsp; 
     <code>option</code>&nbsp;&nbsp; 
     <code>value</code>&nbsp; 
     <code>=</code>&nbsp; 
     <code>"3"</code>&nbsp; 
     <code>&gt;3&lt;/</code>&nbsp; 
     <code>option</code>&nbsp; 
     <code>&gt;</code> 
    </div> 
    <div> 
     <code>&lt;/</code>&nbsp; 
     <code>select</code>&nbsp; 
     <code>&gt;</code> 
    </div> 
    <div> 
     <code>&lt;</code>&nbsp; 
     <code>input</code>&nbsp;&nbsp; 
     <code>type</code>&nbsp; 
     <code>=</code>&nbsp; 
     <code>"button"</code>&nbsp;&nbsp; 
     <code>value</code>&nbsp; 
     <code>=</code>&nbsp; 
     <code>"修改"</code>&nbsp;&nbsp; 
     <code>onclick</code>&nbsp; 
     <code>=</code>&nbsp; 
     <code>"change()"</code>&nbsp;&nbsp; 
     <code>/&gt;</code> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

获取<select>标签选中项文本的js代码为:

一些其它操作<select>标签的技巧如下：

1)动态创建select

2)添加选项option

3)删除所有选项option

4)删除一个选项option

5)获得选项option的值

6)获得选项option的文本

7)修改选项option

8)删除select