✍ 📁 🙈 🙉 🙊 : 標簽 <select>下拉式選單

顯示具有 標簽 <select>下拉式選單 標籤的文章。顯示所有文章

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>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

<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>

<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>

<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>

.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>

function DPcss(x){
Textcss.value = x.innerHTML ;
//alert(x.innerHTML  )
}

DPcss(S1)

</script>

Edit

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

Adding options to select

<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="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>

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>

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>

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>

Tt += '</pre>' ;
DP.innerHTML =Tt ;
}
DPhtml() ;
</script>

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>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

Edit

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

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

html select

Adding options to select

Select option Sort

CSS overflow 控制捲軸

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

html select

Adding options to select

Select option Sort

CSS overflow 控制捲軸

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單