[展覽資訊] 106年 5月份與近期展覽資訊
[遊。新竹] 新竹觀光景點摘要
[遊。行程] 四處玩樂 國內外遊記總覽、行程參考


 


最近看到一個部落格利用到下拉式選單對自己的文章做分類,
也可以快速的看到相關文章內容,覺得滿好用的,自己也加上這功能。

以下是下拉式選單的語法與說明:

完整的thtml語法如下

<html>

<head>
<title>網頁標題</title>
</head>
<body>
<select>
 <option>文字敘述1</option>
 <option>文字敘述2</option>
 <option >文字敘述3</option>
</select>
</body>
</html>
 
範例:
 


 
如果是完整的網頁語法,是從<html>到</html>的所有語法,若是在部落格上嵌入語法,
只需要 <select>到</select>這一段語法而已,由於主要是針對部落格上嵌入語法,
接下來說明就只顯示部份語法而已。
 

一開始預設顯示的都是第一個選項,若是要讓其他選項為預設的顯示文字,
則可以加入 selected="true"。 

<select>
 
<option>文字敘述1</option>
 <option selected="true">文字敘述2</option>
 <option >文字敘述3</option>
</select>
 
範例:
  

 


 

接下來說明點選的選單連結要在新視窗開啟或是原視窗開啟
 
在新視窗開啟選單:
 
<select onchange="window.open(this.options[this.selectedIndex].value)">
 <option value="網址連結">網址文字敘述</option>
 <option value="http://yahoo.com">yahoo網頁</option>
 <option value="http://www.google.com">google網頁</option>
</select>
 
範例:
 
 

原視窗選單:

<select onchange="location.href=this.options[this.selectedIndex].value">
 <option value="網址連結">網址文字敘述</option>
 <option value="http://yahoo.com">yahoo網頁</option>
 <option value="http://www.google.com">google網頁</option>
</select>
 

範例:

 

 


 

若是要在選單中做分類,用標籤的方式分類,則只要加入<optgroup label="">語法即可

<select onchange="window.open(this.options[this.selectedIndex].value)">
<optgroup selected="true" label="常用網頁"> 
 <option value="http://tw.yahoo.com">yahoo網頁</option>
 <option value="http://www.google.com">google網頁</option>
<optgroup label="影音網頁"> 
 <option value="http://www.youtube.com/">Youtbue</option>
 <optgroup label="部落格網頁"> 
 <option value="http://www.pixnet.net/">pixnet</option>
<option value="http://www.wretch.cc">無名</option> 
</select>
 
範例:

 


補充說明:

若要控制select box的長度,可以加入 style="width:150px" 

如此一來就可以決定下拉式選單的長度大小

語法是加在select的參數 : <select style="width:150px" >


 

語法可以放置在 部落格» 部落格管理» 側邊欄位設定» 側欄元件管理,

新增一個板位將語法擺放在"自訂區塊內容"中即可,

或是把語法放在頁首或頁尾也是可以的。

 

 


 

2012.11.12補充

最近在使用發現一個問題,就是如果要開啟第一個選單,似乎無法順利開啟連結,可能是因為他是預設的選項,即使你在選它,也沒有反應...  難怪很多網頁都把第一格放空白...


 

2013.05.27補充

由於自己習慣使用Google Chrome瀏覽器,下拉式選單的運作在Chrome正常,

前幾天才發現有IE使用者,在使用下拉式選單時,新開啟的視窗會被IE封鎖,"Internet Explorer"已封鎖來自xxx的快顯!!

在顯示被封鎖的時候,可以找看看有沒有 [暫時允許快顯]或 [永遠允許來自這個網站的快顯]的按鈕,可以解除封鎖。

或者到IE的『網際網路選項』=>『隱私權』=>『快顯封鎖程式』=>把『開啟快顯封鎖程式』的勾取消掉,這樣新開啟的視窗就不會被封鎖。


 

 

2015.07.19補充

下拉式選單的寬度可以用 "width"來控制

Example:

<select style="width:180px" onchange="window.open(this.options[this.selectedIndex].value)"><optgroup selected="true" label="常用網頁"> 
 <option value="http://tw.yahoo.com">yahoo網頁</option>
 <option value="http://www.google.com">google網頁</option>
<optgroup label="影音網頁"> 
 <option value="http://www.youtube.com/">Youtbue</option>
 <optgroup label="部落格網頁"> 
 <option value="http://www.pixnet.net/">pixnet</option>
</select>
 
 
 
 
 
2016.02.01補充

如果要控制下拉式選單的文字樣式, 可以透過 style 的參數來達成, 另一種方式是用 CSS, 只不過我沒有使用過...不太會用

語法: style="font-family: '文字樣式'; font-size: xx pt; color: #RRBBGG; "

font-family為文字的樣式; font-size為字體大小; color為文字顏色, 是六個十六進位數值

 

Example:

<select style="width:180px" onchange="window.open(this.options[this.selectedIndex].value)" style="font-family: '標楷體'; font-size: 12pt; color: #00FF00;>
<optgroup selected="true" label="常用網頁"> 
 <option value="http://tw.yahoo.com">yahoo網頁</option>
 <option value="http://www.google.com">google網頁</option>
<optgroup label="影音網頁"> 
 <option value="http://www.youtube.com/">Youtbue</option>
 <optgroup label="部落格網頁"> 
 <option value="http://www.pixnet.net/">pixnet</option>
</select>
 
,
創作者介紹

大手牽小手 走遍世界各地每個角落

Chibli 發表在 痞客邦 PIXNET 留言(10) 人氣()


留言列表 (10)

發表留言
  • Chibli
  • To 健康坊 克萊朵:
    我有看到你的留言也測試過你的語法,語法本身沒有問題,應該是開啟的視窗被IE瀏覽器封鎖,"Internet Explorer"已封鎖來自xxx的快顯!!
  • 淡淡藍色
  • 下拉的第一個選單
    可以加入判斷式 IF ELSE

    onChange="if(value!=''){window.open(this.options[this.selectedIndex].value);}else{return(false);}"

    這就可以讓第一個選單 沒有動作
  • 悄悄話
  • 達樂
  • 請問一下
    如果想用下拉式選單進行網頁間傳值
    也有上面所說網址連結的功能
    該怎麼做
  • 我不是很熟, 再找時間研究看看~

    Chibli 於 2014/02/12 00:37 回覆

  • 悄悄話
  • 悄悄話
  • 訪客
  • 哈囉,我可以問一下,我現在用圖片做成選單,要怎麼做呢??因為網路教得也不是我要的..所以可以麻煩你教我嗎??? 謝謝~
  • 我只會基本的使用, 會的也都在文章中, 似乎幫不上你的忙~

    Chibli 於 2015/06/16 18:48 回覆

  • 非『雨』是『纓』
  • 有沒有那個選單寬度??
  • Hi, 你可以試試這個 style="width:180px"

    Chibli 於 2015/07/19 22:33 回覆

  • 雨纓高興見到你
  • 請問有沒有下拉式選單移右邊去在下拉式選單的那種程式??
  • Hi,
    我對這方面的語法沒有研究,
    只能給你一些關鍵字搜尋 "Html Select Submenu"

    Chibli 於 2016/01/08 00:35 回覆

  • 雨纓高興見到你
  • 那下拉式的選單它有一定的字體嗎?可以換字體嗎?
  • Hi, 透過 style 的參數, 可以換字體和顏色, 這是一個範例
    style="font-family: '標楷體'; font-size: 12pt; color: #00FF00;

    Chibli 於 2016/02/01 21:59 回覆