Html下拉列表菜單與跳轉(zhuǎn)菜單怎么實(shí)現(xiàn)

這篇“Html下拉列表菜單與跳轉(zhuǎn)菜單怎么實(shí)現(xiàn)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Html下拉列表菜單與跳轉(zhuǎn)菜單怎么實(shí)現(xiàn)”文章吧。

一、Form select語法與結(jié)構(gòu)：   

<select name=""> <option value="0">DIVCSS5</option> <option value="1">DIVCSS5</option> </select>

二、Form select標(biāo)簽使用說明：    

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

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

我們使用表單下拉列表選擇數(shù)據(jù)，如省、市、縣、年、月等數(shù)據(jù)，我們即可使用下拉菜單表單進(jìn)行設(shè)置。
select 我下拉列表菜單標(biāo)簽
Option為下拉列表數(shù)據(jù)標(biāo)簽
Value 為Option的數(shù)據(jù)值（用于數(shù)據(jù)的傳值）

三、Form select使用種類：

Select下拉菜單列表表單標(biāo)簽，常使用有兩種：

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

<form action="" method="get"> <label>1、普通下拉列表菜單</label> <select name=""> <option value="0">DIVCSS5</option> <option value="1">DIVCSS5</option> </select> </form>

2）、跳轉(zhuǎn)下拉列表菜單（如常見點(diǎn)擊后跳轉(zhuǎn)到選擇網(wǎng)站）
常常一些網(wǎng)站做友情鏈接，與部門之間使用select下拉標(biāo)簽實(shí)現(xiàn)網(wǎng)址跳轉(zhuǎn)。下面我們通過代碼與案例接受select跳轉(zhuǎn)菜單應(yīng)用。

跳轉(zhuǎn)菜單html代碼如下：

<form action="" method="get"> 
<label>2、跳轉(zhuǎn)的下拉列表菜單</label> 
<select name="jumpMenu" id="jumpMenu"
 onchange="MM_jumpMenu('parent',this,0)"> 
<option value="http://www.DIVCSS5.com/">DIVCSS5</option> 
<option value="http://www.億速云.com/">DIVCSS5</option> 
</select> 
</form> 

實(shí)現(xiàn)跳轉(zhuǎn)還需要在head標(biāo)簽內(nèi)加入Js腳本動(dòng)作代碼：

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

即可使用表單select控件實(shí)現(xiàn)跳轉(zhuǎn)的列表菜單效果。

3）、更簡潔的新建瀏覽器（選項(xiàng)卡）窗口跳轉(zhuǎn)菜單：
只需<select>標(biāo)簽內(nèi)加入如下代碼：

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

得到以下代碼：

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

完整簡單新打開網(wǎng)頁窗口跳轉(zhuǎn)菜單實(shí)例：

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

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

五、此select表單標(biāo)簽案例在瀏覽器中效果： 

以上就是關(guān)于“Html下拉列表菜單與跳轉(zhuǎn)菜單怎么實(shí)現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。