碼上快樂
1秒登錄
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
超詳細的HTML
標簽用法及技巧介紹 本文轉載自 查看原文 2019-12-16 10:03 346 超詳細的HTML <select> 標簽用法及技巧介紹 HTML <select> 標簽定義及使用說明 <select> 元素用來創建下拉列表。 <select> 元素中的 <option> 標簽定義了列表中的可用選項。 select 元素可創建單選或多選菜單。當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將 <select> 表單數據提交給服務器時包括 name 屬性。 提示和注釋 提示：<select> 元素是一種表單控件，可用於在表單中接受用戶輸入。 HTML 4.01 與 HTML5之間的差異 HTML5 增加了一些新的屬性。 實例 創建帶有 4 個選項的選擇列表： <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 嘗試一下 » 瀏覽器支持 所有主流瀏覽器都支持 <select> 標簽。 屬性 New：HTML5 中的新屬性。 屬性 值 描述 autofocusNew autofocus 規定在頁面加載時下拉列表自動獲得焦點。 disabled disabled 當該屬性為 true 時，會禁用下拉列表。 formNew form_id 定義 select 字段所屬的一個或多個表單。 multiple multiple 當該屬性為 true 時，可選擇多個選項。 name name 定義下拉列表的名稱。 requiredNew required 規定用戶在提交表單前必須選擇一個下拉列表中的選項。 size number 規定下拉列表中可見選項的數目。 全局屬性 <select> 標簽支持 HTML 的全局屬性。 事件屬性 <select> 標簽支持 HTML 的事件屬性。 相關文章 HTML DOM 參考手冊： Select 對象 <select>標簽的使用技巧總結 1.動態創建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加選項option function addOption(){ //根據id查找對象， var obj=document.getElementById('mySelect'); //添加一個選項 obj.add(new Option("文本","值")); } 3.刪除所有選項option function removeAll(){ var obj=document.getElementById('mySelect'); obj.options.length=0; } 4.刪除一個選項option function removeOne(){ var obj=document.getElementById('mySelect'); //index,要刪除選項的序號，這里取當前選中選項的序號 var index=obj.selectedIndex; obj.options.remove(index); } 5.獲得選項option的值 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序號，取當前選中選項的序號 var val = obj.options[index].value; 6.獲得選項option的文本 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序號，取當前選中選項的序號 var val = obj.options[index].text; 7.修改選項option var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序號，取當前選中選項的序號 var val = obj.options[index]=new Option("新文本","新值"); 8.刪除select function removeSelect(){ var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); } 9.設置select option被選中 function removeSelect(){ // 向辦件人員下拉列表動態添加員工 for ( var i = 0; i < json.length; i++) { var newOption = new Option(json[i].empname, json[i].empid, i); //向辦件人員下拉列表添加員工信息 objDeal.options.add(newOption); //客戶業務員的Id不為空 if(empbyDealEmpId!="" || empbyDealEmpId!=0){ //員工id等於下拉列表中的值,則下拉列表被選中 if(empbyDealEmpId==objDeal.options[i].value){ //判斷此下拉列表被選中 objDeal.options[i].selected=true; } } } } 案例： 如何讓html里的select無法選擇？ 假設有一個select，里面有幾個option，因為測試需要，要固定成為其中的一個option，不能選擇其他，該怎么做呢？如果disabled這個select，結果就是根本沒法取到值了。有沒其他的方法？readonly，也是不可以的，依舊可以選擇。 答案：只放一個option就可以了 或者給option加上disabled="disabled" <form id="form1" name="form1" method="post" action=""> <select name="select"> <option>aa</option> <option disabled="disabled">bb</option> <option>cc</option> </select> </form> 怎么調整select的寬度？ 答案：可以在select標簽中加入style樣式 <style>.s1{ width: 200px;}</style> <select class="s1"> <OPTION>很長很長也能顯示</OPTION> <OPTION>很長很長也能顯示</OPTION> </select> html select標簽加鏈接3種方法 html select標簽加鏈接的方法有很多，接下來為大家介紹下幾個比較經典的，,感興趣的朋友可以參考下，希望可以幫助到你。 第一種： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>select加鏈接</title> </head> <body> <SCRIPT language=javascript> <!-- // open the related site windows function mbar(sobj) { var docurl =sobj.options[sobj.selectedIndex].value; if (docurl != "") { open(docurl,'_blank'); sobj.selectedIndex=0; sobj.blur(); } } //--> </SCRIPT> <Select onchange=mbar(this) name="select"> <OPTION selected>=== 合作伙伴 ===</OPTION> <OPTION value="http://www.baidu.com">百度</OPTION> <OPTION value="http://www.w3cschool.cn">w3cschool在線教程</OPTION> <OPTION value="http://www.w3cschool.cn">優聚</OPTION> </Select> </body> </html> 第二種： <select name="pageselect" onchange="self.location.href=options[selectedIndex].value" > <OPTION value="http://www.baidu.com">百度</OPTION> <OPTION value="http://www.w3cschool.cn">w3cschool在線教程</OPTION> </select> 第三種帶跳轉按鈕的： <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>select選擇-按鈕跳轉</title> <script type="text/javascript"> function setsubmit() { if(mylink.value == 0) window.location='http://www.baidu.com'; if(mylink.value == 1) window.location='http://www.w3cschool.cn'; if(mylink.value == 2) window.location='http://www.w3cschool.cn'; } </script> </head> <body> <select name="mylink" id="mylink"> <OPTION value="0">百度</OPTION> <OPTION value="1">w3cschool在線教程</OPTION> <OPTION value="2">優聚</OPTION> </select> <input type="button" id="btn" value="提交" onclick="setsubmit(this)" /> </body> </html> 擴展知識 select 還可以作為SQL（結構化查詢語言）中的查詢語句使用，SELECT語句返回用指定的條件在一個數據庫中查詢的結果，其返回的結果被看作記錄的集合。關於 SQL 的知識，您可以參考本站的完整的《SQL教程》！ × 免責聲明！ 本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。 猜您在找 html中select標簽（下拉列表）的詳細介紹 jsp中標簽的用法 HTML5中標簽的詳細介紹 html中label標簽的詳細介紹 HTML：Input元素標簽的詳細介紹 HDFS介紹~超詳細 HBase 超詳細介紹 html select與option標簽 html權重值_HTML權重標簽的使用及分值(超詳細解說) AngularJS select詳細用法 粵ICP備18138465號 © 2018-2025 CODEPRJ.COM
