Add Additional Input to Drop down js
HTML Drop down boxes are not allowed to add additional drop down elements.But user will be facing the problem of entering new item to the list of options.Using the Java Scripts we could add additional items into list of options.But after submission of the form or with page refresh it disappears.
Following example click the New category option then java script input box appear to input your new list item of options.After submission new item is in the drop down list.
| <html> <head> <script type="text/javascript"> function xCar_Type(select) { if (select.value!= "new") return; var Car_TypeName = prompt('Please enter category name:',''); if (!Car_TypeName) return; var newOption = document.createElement("option"); newOption.value = Car_TypeName; newOption.appendChild(document.createTextNode(Car_TypeName)); select.insertBefore(newOption, select.lastChild); select.selectedIndex = select.options.length-3; } </script> </head> <body> <table align="center" height=100 bgcolor=#e5b5b5> <tr><td><select name="Car_Type" onchange="xCar_Type(this)"> <option value='Cadillac'>Cadillac</option> <option value='Ford'>Ford</option> <option value='Chevrolet '>Chevrolet</option> <option value="new">New category</option> </select></td></tr> </table> </body> </html> |
No comments:
Post a Comment