window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

標簽 Select,

下拉選單 <Select>    <option>

HTML select option 是下拉式選單，通常用在表單 HTML Form 中，可以自己設定選項（option），每個選項給不同的值，例如 日期、時間、網友名宇、年齡層、居住地區、購買款式 等等供選擇 。

HTML select option 下拉式選單範例 :此範例中的 <select> 是開頭，而 </select> 是結尾，包在裡面的每個 <option></option> 標籤則是選項，每個選項都有一個 value 獨特的值 ，用來判斷 所選擇的項目，value 不會顯示在頁面上，但是可讓程式讀的，不會顯示在頁面上，建議使用英文字母，而 <option> 中的文字就是讓網友看的內容，可以使用中文或符號，一個簡單的 select option 下拉式選單大致上就完成了。

select CSS
<style>
#selectA1 {background-color: silver; border: 3px outset #d5d5d5;
          color: black; cursor: pointer; font-size: 20px;
          width: 150px;}
</style>
<select id="selectA1">
<option>名城       </option>
<option> 新都城     </option>
<option> 沙田第一城 </option>
<option> 日出康城   </option>
<option> 瓏門       </option>
<option> 太古城     </option>
<option> 嘉湖山莊   </option>
</select>


onchange="this.selectedIndex=0" ，每次選擇後返回原位。
<style>
#selectAA1{background-color: silver; border: 3px outset #d5d5d5;
            color: black; cursor: pointer; font-size: 20px;
           width: 150px;   } 
</style> 
<select id="selectAA1" onchange="this.selectedIndex=0">
<option>名城       </option>  
<option> 新都城     </option>  
<option> 沙田第一城 </option>  
<option> 日出康城   </option>  
<option> 瓏門       </option>  
<option> 太古城     </option>  
<option> 嘉湖山莊   </option>  
</select>


Select CSS，select
#selectA2{text-align-last: center;} CSS text-align-last: center;字體置中。
#selectA2{border-radius:50% 50% 50% 50%;} CSS border-radius:50% 50% 50% 50% 圓角。
<style>
#selectA2 {background-color: silver; border: 3px outset #d5d5d5;
          color: black; cursor: pointer; font-size: 20px;
          width: 150px; border-radius:50% 50% 50% 50%;text-align-last: center;}
</style>
<select id="selectA2">
<option>名城       </option>
<option> 新都城     </option>
<option> 沙田第一城 </option>
<option> 日出康城   </option>
<option> 瓏門       </option>
<option> 太古城     </option>
<option> 嘉湖山莊   </option>
</select>


multiple="multiple" size="10" 十層高度並允許多選。 。
<select multiple="multiple" size="10">
<option>名城       </option>
<option> 新都城     </option>
<option> 沙田第一城 </option>
<option> 日出康城   </option>
<option> 瓏門       </option>
<option> 太古城     </option>
<option> 嘉湖山莊   </option>
</select>


disabled 屬性規定某個選項應該被禁用。被禁用的選項既不可用，也不可點擊。
<select disabled >
<option>名城       </option>
<option> 新都城     </option>
<option> 沙田第一城 </option>
<option> 日出康城   </option>
<option> 瓏門       </option>
<option> 太古城     </option>
<option> 嘉湖山莊   </option>
</select>


<optgroup label="1 to 5"> 通過 <optgroup> 標簽把相關的選項組合在一起：
<select>
<optgroup label="1 to 3">
<option>11111</option>
<option>22222</option>
<option>33333</option>
</optgroup> <optgroup label="4 to 6">
<option>44444</option>
<option>55555</option>
<option>66666</option>
</optgroup> <optgroup label="7 to 9">
<option>77777</option>
<option>88888</option>
<option>99999</option>
</optgroup>
</select>


新增/移除 select 內的 option
SELECT元素物件.add(新元素物件,位置)，新元素物件 option 的 text/value，位置 需要加到第幾個 option，如果位置不設定為加到尾後。
SELECT元素物件.remove( 位置 )，位置需要移除第幾個 option。
<input onclick="FAT16341143()" type="button" value="Add" />
<input onclick="FLT16341143()" type="button" value="Less" />


<select id="selID" size="6" style="width: 50px;">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>
;
<input onclick="FAB16341143()" type="button" value="Add" />
<input onclick="FLB16341143()" type="button" value="Less" />

<script>
/* -----------TOP +1   x.add(option,0) ---------*/
function FAT16341143() {
    var x = document.getElementById("selID");
    var option = document.createElement("option");
    var tt = x.options[0].value;
    option.text = parseInt(tt)-1;
    x.add(option,0);
    LLsize();  }

/* ----------TOP -1    x.remove(0) -------------*/
function FLT16341143() {
    var x = document.getElementById("selID");
    if (x.length > 1){
    var option = document.createElement("option");
    x.remove(0);
    LLsize();}
}

/* ---------bottom +1   x.add(option)----------*/
function FAB16341143() {
    var x = document.getElementById("selID");
    var option = document.createElement("option");
    var tt = x.options[x.length-1].value;
    option.text = parseInt(tt)+1;
    x.add(option);
    LLsize();  }

/* ------bottom -1   x.remove(x.length-1)------*/
function FLB16341143() {
    var x = document.getElementById("selID");
      if (x.length > 1){
      x.remove(x.length-1);
      LLsize(); }
}

/* --------size length  x.size=x.length----------------*/
function LLsize(){
var x = document.getElementById("selID");
x.size=x.length;
}
</script>




新增/移除 select 內的 option
SELECT元素物件.add(新元素物件,位置)，新元素物件 option 的 text/value，位置 需要加到第幾個 option，如果位置不設定為加到尾後。
SELECT元素物件.remove( 位置 )，位置需要移除第幾個 option。
<select id="A1635427" size="6" style="cursor: pointer; width: 100px;">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>

<input onclick="FT1635427()" style="cursor: pointer;" type="button" value="Add optgroup" />



<div id="TxT1635427">
z</div>
<script>

/*--------刪除群組 xx.removeChild()-------------------*/
function FDel1635427(x) {
var xx = document.getElementById("A1635427");
    var OPG = xx.getElementsByTagName("OPTGROUP")
    xx.removeChild(OPG[x])
FS1635427();
}

/*-------加 群組  xx.add(optgroup.label,第幾個)  ------------*/
function FT1635427() {
    var xx = document.getElementById("A1635427");
    var OPG= xx.getElementsByTagName("OPTGROUP")
    var optgroup= document.createElement("optgroup");
    if(xx.options.selectedIndex < 0){alert("1 to 6 select \n You did not choose");return;}
    optgroup.label = "label " + OPG.length;
    xx.add(optgroup,xx.options.selectedIndex);
FS1635427();
}

/*--------顯示資訊   Display Information------------------*/
function FS1635427(){
var x = document.getElementById("A1635427");
var ogl=x.getElementsByTagName('optgroup');
x.size=x.length + ogl.length;

var txtx = "  option = " + x.length + "
";
     txtx += "optgroup= " +  ogl.length +"
";

for (var i = 0; i < ogl.length; i++) {
       txtx += "<a style='cursor:pointer;' onclick='FDel1635427(" + i + ")'>";
       txtx += "Delete optgroup[" + i +"] label = " + ogl[i].label + "</a>
"  ;
      }    
document.getElementById('TxT1635427').innerHTML =txtx;
}
 FS1635427();
</script>


z


var e = document.getElementById("selsel") : 取 SELECT元素物件 為 e。
e.options[e.selectedIndex].text : 得出 SELECT text。
e.options[e.selectedIndex].value : 得出 SELECT value。
<select id="selsel" onchange="sel1()" size="6" style="cursor: pointer; width: 100px;">

<option value="大圍"    >名城       </option>
<option value="將軍澳">新都城     </option>
<option value="沙田"    >沙田第一城 </option>
<option value="將軍澳">日出康城   </option>
<option value="屯門"    >瓏門       </option>
<option value="太古城"> 太古城     </option>
<option value="天水圍">嘉湖山莊   </option>
</select>


<div id="selV">
請選擇</div>
<script>
function sel1() {
var e = document.getElementById("selsel");
var strUser = 'your select text is ';
    strUser += e.options[e.selectedIndex].text+"
";
    strUser += 'your select value is ';
    strUser += e.options[e.selectedIndex].value ;
document.getElementById("selV").innerHTML=strUser ;
}
</script>
請選擇


var e = document.getElementById("selsel") : 取 SELECT元素物件 為 e。
e.options[e.selectedIndex].text : 得出 SELECT text。
e.options[e.selectedIndex].value : 得出 SELECT value。
<select id="selsel" onchange="sel1()" size="6" style="cursor: pointer; width: 100px;">

<option value="大圍"    >名城       </option>
<option value="將軍澳">新都城     </option>
<option value="沙田"    >沙田第一城 </option>
<option value="將軍澳">日出康城   </option>
<option value="屯門"    >瓏門       </option>
<option value="太古城"> 太古城     </option>
<option value="天水圍">嘉湖山莊   </option>
</select>


<div id="selV">
請選擇</div>
<script>
function sel1() {
var e = document.getElementById("selsel");
var strUser = 'your select text is ';
    strUser += e.options[e.selectedIndex].text+"
";
    strUser += 'your select value is ';
    strUser += e.options[e.selectedIndex].value ;
document.getElementById("selV").innerHTML=strUser ;
}
</select>


at
Labels:

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)