Html form select下拉列表菜單與select跳轉菜單表單標簽案例教程
- <select name="">
- <option value="0">DIVCSS5</option>
- <option value="1">DIVCSS5</option>
- </select>
為什么我們要使用Form select下來(lái)菜單列表呢?那是我們用于表單下拉選擇所需項。
下面CSS技術(shù)DIVCSS5為大家介紹常見(jiàn)html Form select使用地方。
我們使用表單下拉列表選擇數據,如省、市、縣、年、月等數據,我們即可使用下拉菜單表單進(jìn)行設置。
select 我下拉列表菜單標簽
Option為下拉列表數據標簽
Value 為Option的數據值(用于數據的傳值)

Select下拉菜單列表表單標簽,常使用有兩種:
1)、普通下拉列表菜單
html代碼如下:
- <form action="" method="get">
- <label>1、普通下拉列表菜單</label>
- <select name="">
- <option value="0">DIVCSS5</option>
- <option value="1">DIVCSS5</option>
- </select>
- </form>
2)、跳轉下拉列表菜單(如常見(jiàn)點(diǎn)擊后跳轉到選擇網(wǎng)站)
常常一些網(wǎng)站做友情鏈接,與部門(mén)之間使用select下拉標簽實(shí)現網(wǎng)址跳轉。下面我們通過(guò)代碼與案例接受select跳轉菜單應用。
跳轉菜單html代碼如下:
- <form action="" method="get">
- <label>2、跳轉的下拉列表菜單</label>
- <select name="jumpMenu" id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)">- <option value="http://www.DIVCSS5.com/">DIVCSS5</option>
- <option value="http://www.divcss5.com/">DIVCSS5</option>
- </select>
- </form>
實(shí)現跳轉還需要在head標簽內加入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í)現跳轉的列表菜單效果。
3)、更簡(jiǎn)潔的新建瀏覽器(選項卡)窗口跳轉菜單:
只需<select>標簽內加入如下代碼:
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;">
完整簡(jiǎn)單新打開(kāi)網(wǎng)頁(yè)窗口跳轉菜單實(shí)例:
- <form action="" method="get">
- <label>新建瀏覽器網(wǎng)頁(yè)窗口下拉跳轉菜單</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>


完整案例在線(xiàn)演示:http://www.divcss5.com/fanli/form-select.html
完整案例下載地址:
1)、form select常常我們使用此表單控件設置網(wǎng)頁(yè)下拉列表菜單
2)、當我們選擇“2、跳轉的下拉菜單列表”下拉數據后,將會(huì )跳轉到對于指定設置URL網(wǎng)站。使用select表單下拉菜單實(shí)現跳轉網(wǎng)站網(wǎng)址非常實(shí)用或方便,同時(shí)記得加上JS代碼。
3)、html form、form input、html input、input type、form表單
學(xué)習DIV+CSS歡迎來(lái)DIVCSS5!
如需轉載,請注明文章出處和來(lái)源網(wǎng)址:http://www.divcss5.com/html/h336.shtml
聯(lián)系客服