Adding options to select

<pre><t> JavaScript 對 select 添加 及 刪除 OPTION></t> <t>添加 add()</t> var opt = document.createElement('option') //創建新的 option 元素 opt.value = "value 內容" // 新的 option value opt.text = "option內容" // 新的 option text select_ID.add(opt,x) // x 數目代表新 option 加在第幾位， 例如 x=0 新的 option元素加在 select 最前第一位。 例如 x=3 新的 option元素加在 select 最前第三位。 例如 select_ID.add(opt) 新的 option元素加在 select 末端。 <t>刪除 remove() </t> select_ID.remove(r); // r 數目代表刪除第幾位的 option 加在第幾位。 select_ID.length //下拉列表中 內有幾多個 option select_ID.selectedIndex //序號，取當前選中選項的序號 select_ID[selectedIndex].value //序號，取當前選中選項的序號 value 值 select_ID[selectedIndex].text //序號，取當前選中選項的序號 text 值 select_ID[3].text //序號，取第三項的序號 text 值 select ID.size //下拉列表中的可見選項數值 </pre> <style> pre {font-size: 20px ;} t{font-size: 30px;color : blue;font-weight : bold;} r {color : red} </style>

00

<table><tr><td> select before:</td><td> <input type="button" value="remove option" onclick="beforeRemove ()"> </td><td> <input type="button" value="add option" onclick="beforeADD ()" > </td></tr><tr><td> select after:</td><td> <input type="button" value="remove option" onclick="afterRemove ()" > </td><td> <input type="button" value="add option" onclick="afterADD ()" > </table> <div id="DP"></div> <div id="html"> <select id="selectID" multiple> <option value="1" >option 1</option> <option value="2" >option 2</option> <option value="3" >option 3</option> <option value="4" >option 4</option> </select></div> <script> var newDiv = document.createElement("textarea"); newDiv.id="Textcss" ; newDiv.readOnly = "true" ; document.body.replaceChild(newDiv, DP); function beforeADD (){ var opt = document.createElement('option'); opt.value = (selectID[0].value-1) ; opt.text= "option " + (selectID[0].value-1); selectID.add(opt,0); selectID.size=selectID.length; DDP() } function beforeRemove (){ selectID.remove(0); selectID.size=selectID.length; DDP()} function afterRemove (){ selectID.remove(selectID.length-1); selectID.size=selectID.length; DDP()} function afterADD (){ var opt = document.createElement('option'); var xx=selectID.length-1 ; opt.value = parseFloat(selectID[xx].value)+1 ; opt.text = "option " + (parseFloat(selectID[xx].value)+1) ; selectID.add(opt); selectID.size=selectID.length; DDP() } function DDP(){ var i=0 , Tt=""; Tt += "<select> "; for(i=0 ; i<selectID.length ; i++) { Tt += "\n" + ' <option value="' ; Tt += selectID[i].value + '" >' ; Tt += selectID[i].text + '</option>' ; } Tt += '\n</select>'; Textcss.innerHTML =Tt ; } DDP(); </script> <style> #Textcss {width:100%; height:85%;font-size:20px;} #html { color:red ; display:none ;} input , table{font-size:20px;} </style>

00

Edit

#html #style #script #javascript #html select #select #option #標簽 #autofocus #disabled #form #multiple #required #size #value #label #下拉式選單 #add() #remove()