태그 사용 및 프리젠 테이션 기술 HTML은 <선택> 슈퍼 상세한
HTML <선택> 태그 정의 및 사용 지침
팁과주의 사항
팁 : <SELECT> 제어 요소를 형성 형태의 사용자 입력을 허용 할 수있다.
HTML 4.01과 HTML5의 차이
HTML5는 새로운 속성을 추가합니다.
예
네 가지 옵션이있는 목록 만들기를 선택합니다 :
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
보십시오 >>
브라우저 지원
모든 주요 브라우저는 <선택> 태그를 지원합니다.
재산
새로운 기능 : HTML5의 새로운 속성.
| 属性 | 值 | 描述 |
|---|---|---|
| autofocusNew | autofocus | 规定在页面加载时下拉列表自动获得焦点。 |
| disabled | disabled | 当该属性为 true 时，会禁用下拉列表。 |
| formNew | form_id | 定义 select 字段所属的一个或多个表单。 |
| multiple | multiple | 当该属性为 true 时，可选择多个选项。 |
| name | name | 定义下拉列表的名称。 |
| requiredNew | required | 规定用户在提交表单前必须选择一个下拉列表中的选项。 |
| size | number | 规定下拉列表中可见选项的数目。 |
전역 속성
<선택> 태그를 지원하는 HTML 글로벌 속성 .
이벤트 속성
태그도 지원 <선택> HTML의 이벤트 속성 .
관련 기사
HTML DOM 참조 설명서 : 개체 선택
사용 <선택> 태그 기술 요약
선별 된 동적 만들기 (1)
createSelect 함수 () {
VAR mySelect = document.createElement ( "선택");
mySelect.id = "mySelect";
document.body.appendChild (mySelect);
}
옵션 옵션을 추가합니다
addOption 함수 () {
ID에 따라 개체를 찾을 //,
VAR OBJ = document.getElementById를 ( 'mySelect');
옵션을 추가 //
obj.add (새 옵션 ( "텍스트", "값"));
}
모든 옵션 옵션을 제거합니다
함수에서 removeAll () {
VAR OBJ = document.getElementById를 ( 'mySelect');
obj.options.length = 0;
}
4. 삭제 옵션 옵션
removeOne 함수 () {
VAR OBJ = document.getElementById를 ( 'mySelect');
// 인덱스, 당신은 삭제 옵션을 선택하려면 옵션 번호 여기에 현재의 번호를 취할
VAR 지수 = obj.selectedIndex;
obj.options.remove (인덱스);
}
획득 옵션 5 옵션 값
VAR OBJ = document.getElementById를 ( 'mySelect');
VAR 지수는 obj.selectedIndex =; // 숫자가 현재 옵션의 수를 선택 복용
VAR 브로 = obj.options [인덱스] .value;
텍스트 옵션 옵션을 받기 6.
VAR OBJ = document.getElementById를 ( 'mySelect');
VAR 지수는 obj.selectedIndex =; // 숫자가 현재 옵션의 수를 선택 복용
VAR 브로 = obj.options [인덱스]는 .text;
7. 수정 옵션 옵션
VAR OBJ = document.getElementById를 ( 'mySelect');
VAR 지수는 obj.selectedIndex =; // 숫자가 현재 옵션의 수를 선택 복용
VAR 브로 = obj.options [색인] 새로운 옵션 ( "새로운 텍스트", "새로운 값") =;
선택 삭제 (8)
removeSelect 함수 () {
VAR mySelect = document.getElementById를 ( "mySelect");
mySelect.parentNode.removeChild (mySelect);
}
9.이 선택 옵션을 선택
removeSelect 함수 () {
// 동적 직원 드롭 다운 목록을 할 수있는 직원을 추가
경우 (나는 <json.length; VAR 난 0 = I ++) {
VAR newOption 새로운 옵션 JSON ([I] .empname, JSON을 [I] .empid, I) =;
// 직원은 직원 정보를 추가 드롭 다운 목록을 수행하는
objDeal.options.add (newOption);
// 고객 ID 세일즈맨가 비어 있지 않습니다
경우 (empbyDealEmpId! = ""|| empbyDealEmpId! = 0) {
//리스트 직원 ID 값이 드롭 다운 같은지, 다음에서 선택되는 드롭 다운
경우 (empbyDealEmpId == objDeal.options [I] .value) {
//이 드롭 다운 목록을 선택 판단
objDeal.options [I] .selected = TRUE;
}
}
}
}
케이스 :
어떻게 HTML을 선택에서 선택할 수 없습니다 만드는 방법?
<form id="form1" name="form1" method="post" action=""> <select name="select"> <option>aa</option> <option disabled="disabled">bb</option> <option>cc</option> </select> </form>
어떻게 선택의 폭을 조정?
<style>.s1{ width: 200px;}</style> <select class="s1"> <OPTION>很长很长也能显示</OPTION> <OPTION>很长很长也能显示</OPTION> </select> 태그 플러스 세 가지 방법 링크를 선택 HTML
HTML의 많은 우리는 다음 몇 가지 더 클래식 ,, 관심있는 친구가 당신에게 희망 캔 도움말을 참조 할 수 있습니다 소개로 한 후, 태그 링크 플러스 방법을 선택할 수 있습니다.<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>select加链接</title> </head> <body> <SCRIPT language=javascript> <!-- // open the related site windows function mbar(sobj) { var docurl =sobj.options[sobj.selectedIndex].value; if (docurl != "") { open(docurl,'_blank'); sobj.selectedIndex=0; sobj.blur(); } } //--> </SCRIPT> <Select onchange=mbar(this) name="select"> <OPTION selected>=== 合作伙伴 ===</OPTION> <OPTION value="http://www.baidu.com">百度</OPTION> <OPTION value="http://www.w3cschool.cn">w3cschool在线教程</OPTION> <OPTION value="http://www.w3cschool.cn">优聚</OPTION> </Select> </body> </html> <select name="pageselect" onchange="self.location.href=options[selectedIndex].value" > <OPTION value="http://www.baidu.com">百度</OPTION> <OPTION value="http://www.w3cschool.cn">w3cschool在线教程</OPTION> </select> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>select选择-按钮跳转</title> <script type="text/javascript"> function setsubmit() { if(mylink.value == 0) window.location='http://www.baidu.com'; if(mylink.value == 1) window.location='http://www.w3cschool.cn'; if(mylink.value == 2) window.location='http://www.w3cschool.cn'; } </script> </head> <body> <select name="mylink" id="mylink"> <OPTION value="0">百度</OPTION> <OPTION value="1">w3cschool在线教程</OPTION> <OPTION value="2">优聚</OPTION> </select> <input