目前分類：select option (3)

瀏覽方式： 標題列表 簡短摘要

<form id="selectform">
<select id="selectA"
style='cursor: pointer;width:100px; background-color:#C0C0C0;  color:#000;font-size:20px;border: 3px outset #d5d5d5;'>

<option />友 好
<optgroup style='font-size:5px;' label=""></optgroup>

<option value="http://ck.ug5g.com/" />智障肥強
<optgroup style='font-size:5px;' label=""></optgroup>

<option value="http://html.ug5g.com" />Blogger 技巧
<optgroup style='font-size:5px;' label=""></optgroup>

<option value="http://stocks.ug5g.com/" />即時香港股票
<optgroup style='font-size:5px;' label=""></optgroup>

<option value="http://mp4.ug5g.com/" />詩 歌
<optgroup style='font-size:5px;' label=""></optgroup>

<option value="http://rcc.ug5g.com/" />埔恩堂
<optgroup style='font-size:5px;' label=""></optgroup>

<option value="http://eva.ug5g.com/" />齊賢社
<optgroup style='font-size:5px;' label=""></optgroup>

<option value="https://draft.blogger.com/home" />管理員
</select>
</form>

<script type="text/javascript">
 var urlmenu = document.getElementById( 'selectA' );
 urlmenu.onchange = function() {
 window.open( this.options[ this.selectedIndex ].value );
document.getElementById("selectform").reset();
/* ----------每次選擇後回第1項  ---------- */
 };
</script>

| select | option | 下拉式選單 |

c8cc168 發表在 痞客邦 留言(0) 人氣()

▲top
  • Dec 01 Mon 2014 15:03




<select id="dgre" onmouseout="size=1" onmouseover="size=options.length;">
  <option >11111</option>
  <option >22222</option>
  <option >33333</option>
  <option >44444</option>
</select>

<style type="text/css">
#dgre {font-size:x-large;width: 150px;}
#dgre:hover {width: 330px;}
#dgre option:hover {width: 530px;background-color:Gray;}
</style>

| 下拉式選單 | select | option | onmouseover | onmouseout |

c8cc168 發表在 痞客邦 留言(0) 人氣()

▲top
  • Jul 24 Thu 2014 18:06

select option

<select >
　<option value="上水">上水</option>
　<option value="大埔">大埔</option>
　<option value="沙田">沙田</option>
　<option value="粉嶺">粉嶺</option>
</select>		<select style="cursor:pointer;">
　<option value="上水">上水</option>
　<option value="大埔">大埔</option>
　<option value="沙田">沙田</option>
　<option value="粉嶺">粉嶺</option>
</select>

style="cursor:pointer;"
多一只手指
<select style="background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px;">
　<option value="上水">上水</option>
　<option value="大埔">大埔</option>
　<option value="沙田">沙田</option>
　<option value="粉嶺">粉嶺</option>
</select>


<select style="background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px;" onchange="alert(this.value)">
　<option value="上水">上水</option>
　<option value="大埔">大埔</option>
　<option value="沙田">沙田</option>
　<option value="粉嶺">粉嶺</option>
</select>

cursor:pointer 滑鼠游標圖案是手指

background-color: silver 底色

border: 3px outset #d5d5d5 邊框

color: black 文字顏色

font-size: 20px 文字大細

width: 150px; 寬度
height : 150px; 高度

onchange="alert(this.value)" 選擇後動作
alert(this.value) 顯示對話盒


c8cc168 發表在 痞客邦 留言(0) 人氣()

▲top