html select

<t><<?>select> dropdown menu 用來建立下拉式選單</t> <pre> 讓使用者可以從一堆選項中選擇出一個或多個選項。 <<?>select> 本身做為選單的容器，在裡面用 <<?>option> 標籤來建立個別選項。 <table class="dataintable"> <tbody><tr><tr><td colspan="2"><t>select</t> 標籤上可以用的屬性 attributes : </td></tr><tr> <td>autofocus</td><td>規定在頁面加載後文本區域自動獲得焦點。</td></tr> <tr><td>disabled</td><td>規定禁用該下拉列表。</td></tr> <tr><td>form</td><td>規定文本區域所屬的一個或多個表單。</td></tr> <tr><td>multiple</td><td>規定可選擇多個選項。</td></tr> <tr><td>name</td><td>規定下拉列表的名稱。</td></tr> <tr><td>required</td><td>規定文本區域是必填的。</td></tr> <tr><td>size</td><td>規定下拉列表中可見選項的數目。</td></tr> </tbody></table> <table class="dataintable"> <tbody><tr><td colspan="2"><t>option</t> 標籤上可以用的屬性 attributes :</td></tr><tr> <tr><td>value</td><td>定義送往服務器的選項值。</td></tr> <td>disabled</td><td>規定此選項應在首次加載時被禁用。</td></tr> <td>label</td><td>定義當使用 時所使用的標注。</td></tr> <td>selected</td><td>規定選項（在首次顯示在列表中時）表現為選中狀態。</td> </tr> </tbody></table> </pre> <style> pre {font-size:20px;} t {font-size:30px;color:blue;font-weight : bold; } r {color:red;} table {font-size:20px; width: 100%; border: 1px solid;} </style>

00

<t><<?>select> 用來建立下拉式選單 例子 </t> <table width="95%" border="1" ><tbody> <tr><th colspan="2" align="center"> 第二項 <r>selected</r> 會默認選中。</th></tr></tr> <td width="75%"><pre><<?>select> <<?>option value="A" >select 1<<?>/option> <<?>option value="B" <r>selected</r> >select 2<<?>/option> <<?>option value="C" >select 3<<?>/option> <<?>option value="D" >select 4<<?>/option> <<?>/select></pre> </td><td> <select> <option value="A">select 1</option> <option value="B" selected >select 2</option> <option value="C">select 3</option> <option value="D">select 4</option> </select> </td></tr></tbody></table> <table width="95%" border="1" ><tbody> <tr><th colspan="2" align="center"> <r>multiple</r> 下拉列表中可進行多個選擇</th></tr> <td width="75%"><pre><<?>select <r>multiple</r> > <<?>option value="A" >select 1<<?>/option> <<?>option value="B" >select 2<<?>/option> <<?>option value="C" >select 3<<?>/option> <<?>option value="D" >select 4<<?>/option> <<?>/select></pre> </td><td> <select multiple > <option value="A" >select 1</option> <option value="B" >select 2</option> <option value="C" >select 3</option> <option value="D" >select 4</option> </select> </td></tr></tbody></table> <table width="95%" border="1" ><tbody> <tr><th colspan="2" align="center"> <r>size</r> 用於指定下拉列表中的可見選項數。它的默認值為4。 </th></tr><tr> <td width="75%"><pre><<?>select <r> size="2"</r> > <<?>option value="A" >select 1<<?>/option> <<?>option value="B" >select 2<<?>/option> <<?>option value="C" >select 3<<?>/option> <<?>option value="D" >select 4<<?>/option> <<?>option value="E" >select 5<<?>/option> <<?>/select></pre> </td><td> <select size="2"> <option value="A" >select 1</option> <option value="B" >select 2</option> <option value="C" >select 3</option> <option value="D" >select 4</option> <option value="E" >select 5</option> </select> </td></tr></tbody></table> <style> pre , select {font-size:20px;} t {font-size:30px;color:blue;font-weight : bold; } r {color:red;} table th{font-size:25px;} table {margin :10px} </style>

00

<t><<?>select> 用來建立下拉式選單 例子 </t> <table width="95%" border="1" ><tbody> <tr><th colspan="2" align="center"> <r><<?>optgroup label="1 to 2"></r> 相關標簽</th></tr></tr> <td width="75%"><pre><<?>select> <<?>option style="display:none;" >請選擇<<?>/option> <r><<?>optgroup label="1 to 2"></r> <<?>option value="A" >select 1<<?>/option> <<?>option value="B" >select 2<<?>/option> <r><<?>optgroup label="3 to 4"></r> <<?>option value="C" >select 3<<?>/option> <<?>option value="D" >select 4<<?>/option> <<?>/select></pre> </td><td> <select> <option style="display:none;">請選擇</option> <optgroup label="1 to 2"> <option value="A">select 1</option> <option value="B">select 2</option> <optgroup label="3 to 4"> <option value="C">select 3</option> <option value="D">select 4</option> </select> </td></tr></tbody></table> <table width="95%" border="1" ><tbody> <tr><th colspan="2" align="center"> <r>style="display:none"</r> option不能選擇</th></tr></tr> <td width="75%"><pre><<?>select> <<?>option <r>style="display:none;"</r> >請選擇<<?>/option> <<?>option value="A" >select 1<<?>/option> <<?>option value="B" >select 2<<?>/option> <<?>option value="C" >select 3<<?>/option> <<?>option value="D" >select 4<<?>/option> <<?>/select></pre> </td><td> <select> <option style="display:none;">請選擇</option> <option value="A">select 1</option> <option value="B">select 2</option> <option value="C">select 3</option> <option value="D">select 4</option> </select> </td></tr></tbody></table> <table width="95%" border="1" ><tbody> <tr><th colspan="2" align="center"> <r>onchange="this.selectedIndex=0"</r> 擇後返回原位 </th></tr></tr> <td width="75%"><pre><<?>select <r>onchange="this.selectedIndex=0"</r> > <<?>option style="display:none;" >請選擇<<?>/option> <<?>option value="A" >select 1<<?>/option> <<?>option value="B" >select 2<<?>/option> <<?>option value="C" >select 3<<?>/option> <<?>option value="D" >select 4<<?>/option> <<?>/select></pre> </td><td> <select onchange="this.selectedIndex=0"> <option style="display:none;">請選擇</option> <option value="A">select 1</option> <option value="B">select 2</option> <option value="C">select 3</option> <option value="D">select 4</option> </select> </td></tr></tbody></table> <style> pre , select {font-size:20px;} t {font-size:30px;color:blue;font-weight : bold; } r {color:red;} table th{font-size:25px;} table {margin :10px} </style>

00

<div style="display: flex; flex-wrap: wrap; justify-content: space-around; flex-direction: row;"> <div id="S1" onclick="DPcss(this)"> <label class="S1"> <select > <option>select 1</option> <option>Coffee</option> <option>Tea</option> <option>Juice</option> <optionCocktail</option> </select> </label> <style> .S1 select { width: 140px; height: 35px; padding: 4px; color:indigo; font-size:20px; border-radius: 4px; box-shadow: 2px 2px 8px #999; background: #eee; border: none; outline: none; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .S1 select:hover {background: #efe;} .S1 select Option { color:blue; font-size:18px; } .S1 { position: relative; } .S1::after { content: '< >'; font-size:20px; color: #666; background: none; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); right: 8px; top: -6px; padding: 0 0 2px; border-bottom: 1px solid #ddd; position: absolute; pointer-events: none; } </style> </div > <div id="S2" onclick="DPcss(this)" > <label class="S2"> <select> <option value="0" style="display:none;" >select 2</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </label> <style> .S2 select { width: 200px; height: 40px; padding: 4px; color: white; font-size:20px; border-radius: 4px; box-shadow: 2px 2px 8px #999; background: #2c3e50; border: none; outline: none; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .S2 select:hover {background: #2c5a60;} .S2 select Option { color:blue; font-size:18px; } .S2 { position: relative; } .S2:after { content: '\25BC'; font-size:20px; color:sandybrown; background: none; //-webkit-transform: rotate(90deg); //-moz-transform: rotate(90deg); //transform: rotate(90deg); right: 8px; top: -5px; //padding: 0 0 2px; //border-bottom: 1px solid #ddd; position: absolute; pointer-events: none; } .S2 select Option { color:red; font-size:18px; } </style> </div > <div id="S3" onclick="DPcss(this)" > <label class="S3" > <select> <option value="0" style="display:none;" >select 3</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </label> <style> .S3 select { width: 150px; height: 35px; padding: 4px; color:blue; border-radius: 0px; font-size:20px; box-shadow: 0 0 0 #000000; background: silver; border: 1px solid black; outline: 1px; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .S3 select:hover {background: #D3D3D3;} .S3 select Option { color:blue; font-size:18px; } .S3 { position: relative; } .S3:after { content: '☝'; font-size:26px; color: #666; background: none; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); right: 10px; top: -10px; padding: 0 0 2px; border-bottom: 1px solid #ddd; position: absolute; pointer-events: none; } </style> </div > </div> <br>HTML CSS <div id="DP"></div> <script> var newDiv = document.createElement("textarea"); newDiv.id="Textcss" ; newDiv.readOnly = "true" ; document.body.replaceChild(newDiv, DP); function DPcss(x){ Textcss.value = x.innerHTML ; //alert(x.innerHTML ) } DPcss(S1) </script> <style>#Textcss{width: 100%; height: 90%; font-size:20px; background-color: azure;} </style>

00

Adding options to select

<pre><t> JavaScript 對 select 添加 及 刪除 OPTION></t> <t>添加 add()</t> var opt = document.createElement('option') //創建新的 option 元素 opt.value = "value 內容" // 新的 option value opt.text = "option內容" // 新的 option text select_ID.add(opt,x) // x 數目代表新 option 加在第幾位， 例如 x=0 新的 option元素加在 select 最前第一位。 例如 x=3 新的 option元素加在 select 最前第三位。 例如 select_ID.add(opt) 新的 option元素加在 select 末端。 <t>刪除 remove() </t> select_ID.remove(r); // r 數目代表刪除第幾位的 option 加在第幾位。 select_ID.length //下拉列表中 內有幾多個 option select_ID.selectedIndex //序號，取當前選中選項的序號 select_ID[selectedIndex].value //序號，取當前選中選項的序號 value 值 select_ID[selectedIndex].text //序號，取當前選中選項的序號 text 值 select_ID[3].text //序號，取第三項的序號 text 值 select ID.size //下拉列表中的可見選項數值 </pre> <style> pre {font-size: 20px ;} t{font-size: 30px;color : blue;font-weight : bold;} r {color : red} </style>

00

<table><tr><td> select before:</td><td> <input type="button" value="remove option" onclick="beforeRemove ()"> </td><td> <input type="button" value="add option" onclick="beforeADD ()" > </td></tr><tr><td> select after:</td><td> <input type="button" value="remove option" onclick="afterRemove ()" > </td><td> <input type="button" value="add option" onclick="afterADD ()" > </table> <div id="DP"></div> <div id="html"> <select id="selectID" multiple> <option value="1" >option 1</option> <option value="2" >option 2</option> <option value="3" >option 3</option> <option value="4" >option 4</option> </select></div> <script> var newDiv = document.createElement("textarea"); newDiv.id="Textcss" ; newDiv.readOnly = "true" ; document.body.replaceChild(newDiv, DP); function beforeADD (){ var opt = document.createElement('option'); opt.value = (selectID[0].value-1) ; opt.text= "option " + (selectID[0].value-1); selectID.add(opt,0); selectID.size=selectID.length; DDP() } function beforeRemove (){ selectID.remove(0); selectID.size=selectID.length; DDP()} function afterRemove (){ selectID.remove(selectID.length-1); selectID.size=selectID.length; DDP()} function afterADD (){ var opt = document.createElement('option'); var xx=selectID.length-1 ; opt.value = parseFloat(selectID[xx].value)+1 ; opt.text = "option " + (parseFloat(selectID[xx].value)+1) ; selectID.add(opt); selectID.size=selectID.length; DDP() } function DDP(){ var i=0 , Tt=""; Tt += "<select> "; for(i=0 ; i<selectID.length ; i++) { Tt += "\n" + ' <option value="' ; Tt += selectID[i].value + '" >' ; Tt += selectID[i].text + '</option>' ; } Tt += '\n</select>'; Textcss.innerHTML =Tt ; } DDP(); </script> <style> #Textcss {width:100%; height:85%;font-size:20px;} #html { color:red ; display:none ;} input , table{font-size:20px;} </style>

00

Edit

#html #style #script #javascript #html select #select #option #標簽 #autofocus #disabled #form #multiple #required #size #value #label #下拉式選單 #add() #remove()

Select option Sort

CSS overflow 控制捲軸

<b>Javascript to sort contents of select element</b><br><br> <select id="Sel" > <option value="158.12 HK$">3 people</option> <option value="276.36 HK$">2 people</option> <option value="110.36 HK$">8 people</option> <option value="879.69 HK$">1 people</option> <option value="256.36 HK$">4 people</option> </select> <div id="DP"></div> select sort <br> <input type="button" value="sort by HK$" onclick="sortMe('value')"> <input type="button" value="sort by people" onclick="sortMe('text')"> <pre><ol><li> <<c>script> <li> function sortMe(x){ <li> var tmpAry = new Array(); <li> for (var i=0; i<5 ;i++) { <li> tmpAry[i] = new Array(); <li> if(x=='text' ){ tmpAry[i][0] = Sel[i].text; <li> tmpAry[i][1] = Sel[i].value; } <li> if(x=='value' ){ tmpAry[i][0] = Sel[i].value; <li> tmpAry[i][1] = Sel[i].text; } <li> } <li> tmpAry = tmpAry.sort() ; <li> for (var ii=0; ii<5 ;ii++) { <li> if(x=='text' ){ Sel[ii].text = tmpAry[ii][0] ; <li> Sel[ii].value = tmpAry[ii][1] ;} <li> if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ; <li> Sel[ii].text = tmpAry[ii][1] ;} <li> } <li> } <li> <<c>/script> </pre> <script> function DPhtml(){ var Tt = '<pre>'; Tt += '<<c>select id="Sel" >' ; Tt += '\n <<c>OPTION value="' ; Tt += Sel[0].value + '" >' + Sel[0].innerHTML + '<<c>/option>' ; Tt += '\n <<c>OPTION value="' ; Tt += Sel[1].value + '" >' + Sel[1].innerHTML + '<<c>/option>' ; Tt += '\n <<c>OPTION value="' ; Tt += Sel[2].value + '" >' + Sel[2].innerHTML + '<<c>/option>' ; Tt += '\n <<c>OPTION value="' ; Tt += Sel[3].value + '" >' + Sel[3].innerHTML + '<<c>/option>' ; Tt += '\n <<c>OPTION value="' ; Tt += Sel[4].value + '" >' + Sel[4].innerHTML + '<<c>/option>' ; Tt += '\n<<c>/select>' ; Tt += '</pre>' ; DP.innerHTML =Tt ; } DPhtml() ; </script> <script> function sortMe(x){ var tmpAry = new Array(); for (var i=0; i<5 ;i++) { tmpAry[i] = new Array(); if(x=='text' ){ tmpAry[i][0] = Sel[i].text; tmpAry[i][1] = Sel[i].value; } if(x=='value' ){ tmpAry[i][0] = Sel[i].value; tmpAry[i][1] = Sel[i].text; } } tmpAry = tmpAry.sort() ; for (var ii=0; ii<5 ;ii++) { if(x=='text' ){ Sel[ii].text = tmpAry[ii][0] ; Sel[ii].value = tmpAry[ii][1] ;} if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ; Sel[ii].text = tmpAry[ii][1] ;} DPhtml() ; } } </script> <style> pre,n {font-size:20px;} b {font-size:30px;color:blue;font-weight : bold; } r {color:red;} table {font-size:20px; width: 100%; border: 1px solid;} </style>

00

Edit

#html #網頁格式 #script #style #div