Bootstrap Select Menu – Add New Option

综合技术 2018-05-18 阅读原文

I have a simple Bootstrap form with a select input:

Fruit Vegetables

The users now have a requirement to be able to add a new option dynamically to the select menu rather than be restricted to the items on the select menu.

I'm not sure if it's possible to modify a select menu and how to make it consistent with the rest of the Bootstrap framework?

To add an option dynamically, there should be a UI button giving you that choice. To get user input, we can use the window.prompt

We then create an option element, set its value attribute and set its name. Then just append these elements and nodes to the DOM with appendChild

Try playing around with this. I added some items like Steak, potatoes and beer.

var addOption = document.getElementById("add-option");
var selectField = document.getElementById("category");
addOption.addEventListener("click", function() {
    var item = prompt("What would you like");
    var option = document.createElement("option");
    option.setAttribute("value", item);
    var optionName = document.createTextNode(item);

Fruit Vegetables

Hello, buddy!

责编内容by:Hello, buddy!阅读原文】。感谢您的支持!


Learn Bootstrap: Design a Custom Landing Page in B... Description Featured on: May 16, 2018 Build Bootstrap applications quickly and effectively. Us...
Bootstrap 模态框多次显示后台会提交多次BUG... 模态框 Bootstrap Modal Bootstrap 的模态框使用Bootstrap 的前端应该都接触过。 本文记录一下今天使用时遇到的 BUG,以便以后查阅和帮助其他遇到同样问题的伙伴们。 BU...
【Bootstrap系列】详解Bootstrap-table 本篇文章将与大家分享bootstrap-table插件,借助于它实现基本的增删改查,导入导出,分页,父子表等。 至于其他技术,如冻结表头,列排列,行拖动,列拖动等,会在后续文章中与大家分享。 一 效果图 (一)页面初始化 ...
Getting started with Webpack and ES6 with Angular ... We can execute above script via node or yarn cli, This script will take file as input and create in dist(distributi...
Data visualization with statistical reasoning: see... This blog post is one of a series highlighting specific images from my book Data Visualization: charts, maps and intera...