スーパーの詳細なHTMLの<select>タグの使用方法とプレゼンテーションスキル
HTMLの<select>タグを定義して、使用説明書
ヒントと注意事項
ヒント： <SELECT>制御素子を形成する形でユーザ入力を受け入れるために使用することができます。
HTML 4.01とHTML5の違い
HTML5には、いくつかの新しいプロパティを追加します。
例
4つのオプションのリストを作成する]を選択します：
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
試してみてください>>
ブラウザのサポート
すべての主要なブラウザは、<select>タグをサポートしています。
プロパティ
新：HTML5の新しい属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autofocusNew | autofocus | 规定在页面加载时下拉列表自动获得焦点。 |
| disabled | disabled | 当该属性为 true 时，会禁用下拉列表。 |
| formNew | form_id | 定义 select 字段所属的一个或多个表单。 |
| multiple | multiple | 当该属性为 true 时，可选择多个选项。 |
| name | name | 定义下拉列表的名称。 |
| requiredNew | required | 规定用户在提交表单前必须选择一个下拉列表中的选项。 |
| size | number | 规定下拉列表中可见选项的数目。 |
グローバル・プロパティ
<select>タグがサポートする HTMLグローバル属性。
イベントのプロパティ
<select>タグもサポートして HTMLでのイベント属性を。
関連記事
HTML DOMリファレンスマニュアル： オブジェクトの選択
使用<select>タグのスキルの概要
選択の動的作成1.
機能createSelect（）{
VAR MySelectと=のdocument.createElement（ "選択"）;
mySelect.id = "MySelectと";
document.body.appendChild（MySelectと）。
}
2. [追加オプションオプション
関数addOption（）{
//は、IDに基づいてオブジェクトを検索し、
VAR OBJ =のdocument.getElementById（ 'MySelectと'）;
//オプションを追加
obj.add（新しいオプション（ "テキスト"、 "値"））;
}
すべてのオプションオプションを削除3.
関数の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 [インデックス] =新しいオプション（「新しいテキスト」、「新しい値」）。
![[削除]を選択します](https://atts.w3cschool.cn/attachments/image/20161103/1478155299885826.jpg)
8. [削除]
機能removeSelect（）{
VAR MySelectと=のdocument.getElementById（ "MySelectと"）;
mySelect.parentNode.removeChild（MySelectと）。
}
9.設定選択オプションが選択されています
機能removeSelect（）{
//ダイナミックスタッフのドロップダウンリストを行うためにスタッフを追加
以下のために（; I <json.length; VAR iが0 = I ++）{
VAR newOption =新しいオプション（JSON [I] .empname、JSON [i]は.empid、I）。
//スタッフは、従業員情報を追加するために、ドロップダウンリストを行うには
objDeal.options.add（newOption）。
//顧客IDセールスマンは空ではありません
もし（empbyDealEmpId！= "" || empbyDealEmpId！= 0）{
//リスト内の従業員IDの値はドロップダウンに等しい、リストが選択されたドロップダウン
IF（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のselectタグを加えた三つの方法リンク
我々は次のいくつかのより多くの古典的な,,興味の友人があなたに役立つことを願って、参照することができ、次に紹介するように、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