✍ 📁 🙈 🙉 🙊

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

flex-flow flex-direction flex-wrap

ul {list-style: none;
  display: flex;
  flex-wrap: wrap;
}

li { padding:2px;
  height: 100px;
  flex-grow: 58;
}

li:last-child {
  // There's no science in using "10" here. In all my testing, this delivered the best results.
  flex-grow: 60;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

</style>

<div style="width: 100%; height:400px;display: flex;
            display:flex ; justify-content: center;
            align-items : center; border: 3px solid;">
<div id="outerDiv">
  <div id="div1">1 </div>
  <div id="div2">2 </div>
  <div id="div3">3 </div>
  <div id="div4">4 </div>
  <div id="div5">5 </div>
 </div></div>
<div id="out">id=outerDiv</div>

#sel , #sel select  {font-size: 20px ;}
#outerDiv{ width: 40%; height:200px;
           border: 3px solid;
           display: flex;
           flex-direction: row; 
           flex-wrap: nowrap        }

#outerDiv div { display:inherit;flex:1;
                justify-content: center;
                align-items : center;font-size: 20px ;
                border: 1px solid black; }
}	
</style>

<table border="1" width="100%"><tbody>
<tr><td>	
<div id="sel">
outerDiv.display :
<select onchange="outerDiv.style.display = this.value">
    <option value="flex" >flex</option>
    <option value="initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br>
	
outerDiv.flex-direction :
<select onchange="outerDiv.style.flexDirection= this.value">
    <option value="row"     > row</option>
    <option value="row-reverse" >row-reverse</option>
    <option value="column"   > column</option>
    <option value="column-reverse"    >  column-reverse</option>
    <option value=" initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br> 
outerDiv.flex-wrap :
<select onchange="outerDiv.style.flexWrap= this.value">
    <option value="nowrap"     > nowrap</option>
    <option value="wrap" >wrap</option>
    <option value="wrap-reverse"   > wrap-reverse</option>
    <option value=" initial"       >  initial</option>
    <option value="inherit"       > inherit</option>
</select>
<br><br> 
innerDiv.flex:
<select onchange="Fff(this.value)">
    <option value="1" > 1</option>
    <option value="0" >0</option>
</select>
<br>
innerDiv div quantity
<select onchange="Dq(this.value)">
    <option value="5" >5</option>
    <option value="3" >3</option>
    <option value="1" >1</option>
</select>

</td><td><pre><div id="DP"></div></pre>
</td></tr></tbody></table>

if(x == 1){ div2.style.display="none" ;
            div3.style.display="none" ;
            div4.style.display="none" ;
            div5.style.display="none" ;}

if(x == 3){ div4.style.display="none" ;
            div5.style.display="none" ;}

}

function Fff(x){
div1.style.flex = x;
div2.style.flex = x;
div3.style.flex = x;
div4.style.flex = x;
div5.style.flex = x;
}

outerDiv.style.flexDirection="row";
outerDiv.style.flexWrap="nowrap";
window.addEventListener( "change", DDP)
function DDP() {
var tx="<font size=4> outerDivdiv CSS<br>" ;
tx += " width:60%; height:300px ;<br>" ;
tx += " border:3px solid;<br>" ;
tx += " display:flex <br>" ; 
tx += " flex-direction:"+ outerDiv.style.flexDirection+" ;<br>" ;
tx += " flex-wrap: "+ outerDiv.style.flexWrap +" ;  " ;
DP.innerHTML =tx;
//alert()
}

function divD(x , c) {
x.style.display="flex";
if(c.checked) {x.style.display="none";} 
}
DDP();
</script>

Edit

#html #style #script #javascript #CSS

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

html select

Adding options to select

flex-flow flex-direction flex-wrap

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

html select

Adding options to select

flex-flow flex-direction flex-wrap

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單