Html form select下拉列表菜單與select跳轉菜單表單標簽案例教程

select目錄

1. Form select語法與結構
2. Form select標簽使用認識
3. select普通菜單與跳轉菜單案例
4. DW軟件里截圖表單效果
5. select表單標簽案例圖
6. html form select案例總結

一、Form select語法與結構： - TOP

<selectname=""
<optionvalue="0"DIVCSS5</option
<optionvalue="1"DIVCSS5</option
</select

二、Form select標簽使用說明： - TOP

為什么我們要使用Form select下來菜單列表呢？那是我們用于表單下拉選擇所需項。

下面CSS技術DIVCSS5為大家介紹常見html Form select使用地方。

我們使用表單下拉列表選擇數據，如省、市、縣、年、月等數據，我們即可使用下拉菜單表單進行設置。
select 我下拉列表菜單標簽
Option為下拉列表數據標簽
Value 為Option的數據值（用于數據的傳值）

select使用地方，上圖為日期下拉列表案例運用截圖

三、Form select使用種類： - TOP

Select下拉菜單列表表單標簽，常使用有兩種：

1）、普通下拉列表菜單
html代碼如下：

<formaction=""method="get"
<label1、普通下拉列表菜單</label
<selectname=""
<optionvalue="0"DIVCSS5</option
<optionvalue="1"DIVCSS5</option
</select
</form

2）、跳轉下拉列表菜單（如常見點擊后跳轉到選擇網站）
常常一些網站做友情鏈接，與部門之間使用select下拉標簽實現網址跳轉。下面我們通過代碼與案例接受select跳轉菜單應用。

跳轉菜單html代碼如下：

<formaction=""method="get"
<label2、跳轉的下拉列表菜單</label
<selectname="jumpMenu"id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)"
<optionvalue="http://www.DIVCSS5.com/"DIVCSS5</option
<optionvalue="http://www.divcss5.com/"DIVCSS5</option
</select
</form

實現跳轉還需要在head標簽內加入Js腳本動作代碼：

<scripttype="text/javascript"
<!--
functionMM_jumpMenu(targ,selObj,restore){//v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if(restore)selObj.selectedIndex=0;
}
//--
</script

即可使用表單select控件實現跳轉的列表菜單效果。

3）、更簡潔的新建瀏覽器（選項卡）窗口跳轉菜單：
只需<select標簽內加入如下代碼：

onchange="javascript:if (this.options[this.selectedIndex].value != '') window.open(this.options[this.selectedIndex].value);this.options[0].selected;"

得到以下代碼：

<selectonchange="javascript:if(this.options[this.selectedIndex].value!='')
window.open(this.options[this.selectedIndex].value);this.options[0].selected;"

完整簡單新打開網頁窗口跳轉菜單實例：

<formaction=""method="get"
<label新建瀏覽器網頁窗口下拉跳轉菜單</label
<selectname=""onchange="javascript:if (this.options[this.selectedIndex].value != '')
 window.open(this.options[this.selectedIndex].value);this.options[0].selected;"
<optionvalue="0"DIVCSS5</option
<optionvalue="1"DIVCSS5</option
</select
</form

四、DW軟件里截圖表單效果： - TOP

htmlselect下拉菜單列表與跳轉菜單案例截圖

五、此select表單標簽案例在瀏覽器中效果： - TOP

實例案例截圖

完整案例在線演示：http://www.divcss5.com/fanli/form-select.html
完整案例下載地址：

立即下載（1.502KB）

六、DIVCSS5對html form select案例總結說明： - TOP

1）、form select常常我們使用此表單控件設置網頁下拉列表菜單
2）、當我們選擇“2、跳轉的下拉菜單列表”下拉數據后，將會跳轉到對于指定設置URL網站。使用select表單下拉菜單實現跳轉網站網址非常實用或方便，同時記得加上JS代碼。
3)、html form、form input、html input、input type、form表單

學習DIV+CSS歡迎來DIVCSS5!

• DIVCSS5為您推薦的相關聯教程
• css實現下拉表單select美化
• jq css實現下拉列表美化

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。