단일 또는 다중 선택 메뉴를 생성하는 HTML
- WBOY원래의
- 2016-08-29 08:36:502736검색
모든 주요 브라우저는
select 요소는 단일 선택 또는 다중 선택 메뉴를 생성합니다.
팁: 선택 요소는 양식에서 사용자 입력을 받아들이는 데 사용할 수 있는 양식 컨트롤입니다.
속성
새로운 기능: HTML5의 새로운 속성.
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus（5） | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
| disabled | disabled | 规定禁用该下拉列表。 |
| form（5） | form_id | 规定文本区域所属的一个或多个表单。 |
| multiple | multiple | 规定可选择多个选项。 |
| name | name | 规定下拉列表的名称。 |
| required（5） | required | 规定文本区域是必填的。 |
| size | number | 规定下拉列表中可见选项的数目。 |
이 예에서는 HTML 페이지에 간단한 드롭다운 목록 상자를 만드는 방법을 보여줍니다. 드롭다운 목록 상자는 선택 가능한 목록입니다.
<html> <body> <form> <<span style="color: #0000ff;">select</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">cars</span><span style="color: #800000;">"</span>> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">volvo</span><span style="color: #800000;">"</span>>Volvo</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">saab</span><span style="color: #800000;">"</span>>Saab</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">fiat</span><span style="color: #800000;">"</span>>Fiat</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">audi</span><span style="color: #800000;">"</span>>Audi</option> </<span style="color: #0000ff;">select</span>> </form> </body> </html>
- 이 예에서는 미리 선택된 값으로 간단한 드롭다운 목록을 만드는 방법을 보여줍니다. (번역자 주: 미리 선택된 값은 미리 지정된 환경 설정을 나타냅니다.)
<html> <body> <form> <<span style="color: #0000ff;">select</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">cars</span><span style="color: #800000;">"</span>> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">volvo</span><span style="color: #800000;">"</span>>Volvo</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">saab</span><span style="color: #800000;">"</span>>Saab</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">fiat</span><span style="color: #800000;">"</span> selected=<span style="color: #800000;">"</span><span style="color: #800000;">selected</span><span style="color: #800000;">"</span>>Fiat</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">audi</span><span style="color: #800000;">"</span>>Audi</option> </<span style="color: #0000ff;">select</span>> </form> </body> </html>
첨부: 개체 선택
선택 개체는 HTML 형식의 드롭다운 목록을 나타냅니다.
HTML 양식에서는
양식의 elements[] 배열을 반복하거나 document.getElementById()를 사용하여 Select 개체에 액세스할 수 있습니다.
객체 컬렉션 선택
| 集合 | 描述 |
|---|---|
| options[] | 返回包含下拉列表中的所有选项的一个数组。 |
개체 속성 선택
| 属性 | 描述 |
|---|---|
| disabled | 设置或返回是否应禁用下拉列表。 |
| form | 返回对包含下拉列表的表单的引用。 |
| id | 设置或返回下拉列表的 id。 |
| length | 返回下拉列表中的选项数目。 |
| multiple | 设置或返回是否选择多个项目。 |
| name | 设置或返回下拉列表的名称。 |
| selectedIndex | 设置或返回下拉列表中被选项目的索引号。 |
| size | 设置或返回下拉列表中的可见行数。 |
| tabIndex | 设置或返回下拉列表的 tab 键控制次序。 |
| type | 返回下拉列表的表单类型。 |
표준 속성
| 属性 | 描述 |
|---|---|
| className | 设置或返回元素的 class 属性。 |
| dir | 设置或返回文本的方向。 |
| lang | 设置或返回元素的语言代码。 |
| title | 设置或返回元素的 title 属性。 |
개체 방법 선택
| 方法 | 描述 |
|---|---|
| add() | 向下拉列表添加一个选项。 |
| blur() | 从下拉列表移开焦点。 |
| focus() | 在下拉列表上设置焦点。 |
| remove() | 从下拉列表中删除一个选项。 |
객체 이벤트 핸들 선택
| 事件句柄 | 描述 |
|---|---|
| onchange | 当改变选择时调用的事件句柄。 |
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.