關於HTML中select標記的一些知識
阿新 • • 發佈:2019-02-20
select標記是網頁程式設計中比較常用的一種標記,身為表單標記的一員,它主要是通過option標記結合其他表單標記(諸如input,textarea)一起來實現表單的效果,表單要實現的就是向下一級傳遞資料。這種情況下它的使用格式如下
除了上述使用情況外,它還可以單獨使用,這也是我寫這篇部落格的重點。
1.通過select的option標記直接進入想進的介面
這種情況我根據做的一個英語單詞網頁來看效果,點選檢視 ,使用的程式碼如下:
<select onchange="document.location=options[selectedIndex].value" size="1"> <% for(int i=1;i<=pages;i++){ if(i==pageI){ %> <option selected="/listwords.jsp?cpage=<%=i%>">第<%=i %>頁</option> <% }else{ %> <option value="/listwords.jsp?cpage=<%=i%>">第<%=i %>頁</option> <% } } %> </select>
如上所示,點選指定頁碼的option,即可直接進入該頁的單詞以顯示,主要就是將option的value值設為該頁碼的連結,然後在select中新增onchange事件即可。
2.通過結合js來實現跳轉
這種情況我拿做的運動獎金賽顯示記錄網頁來說,通過點選下拉列表,實現檢視指定月份的獎金賽記錄
<select id="change" onchange="change()"> <option value="all">請選擇</option> <option value="all">全部</option> <option value="2018-09">2018-09</option> <option value="2018-10">2018-10</option> <option value="2018-11">2018-11</option> <option value="2018-12">2018-12</option> </select> <script type="text/javascript"> function change(){ var ch=document.getElementById("change"); //下面第一個返回選擇的下拉列表的文字值,第二個返回選擇的值對應的value //var va=ch.options[ch.selectedIndex].innerHTML;//下拉列表選擇的項 var va=ch.options[ch.selectedIndex].value;//下拉列表選擇的項 window.location.href="showContest.jsp?month="+va; } </script>
以上文章已同步至本人部落格,歡迎訪問閱讀。