在按钮中显示下拉选项

Question

我有一个下拉列表，当我从该列表中选择一个选项时，它会在该选项下显示一个带有该选项的按钮，用户可以选择多个选项，因此我想显示许多带有关闭符号的按钮这样用户就可以删除该选项，我该如何使用JavaScript呢？ 这是我的代码：

 $('select').on('change', function() { var unselected = $('select').filter(function() { return this; $('.btn').show(); }); });

 .btn{ display:none;}

 <div class="form-group"> <label>Pick your item</label> <select class="form-control"> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> <option>Item 4</option> </select> </div> <button type="button" class="btn btn-default">Chosen value should be here</button>

Answer 1

像这样，您没有关闭的迹象，但它的工作方式几乎相同。

 // everytime some option is selected in the select with "cars" id $('#cars').on('change', function() { // it will run through the selected options $('option:selected').each(function() { var op = $(this); var text = op.text(); // checks if the button is already there var already_there = false; $('#btns button').each(function() { var btn = $(this); if(btn.text() == op.text()) { already_there = true; // leaves the verification return false; } }); // if it isn't, appends to the div with id "btns" if(!already_there) { var btn = $('<button type="button" class="btn btn-default" onclick="removeBtn(this)"></button>'); btn.append(text); $('#btns').append(btn); } }); }); // removes a button (obvious xD) function removeBtn(btn) { $(btn).remove(); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head><title>Test</title></head> <body> <select multiple id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <div id="btns"></div> </body> </html>

在按钮中显示下拉选项

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-05-25 19:53:38

在按钮中显示下拉选项

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-05-25 19:53:38

解决方案1
3 已采纳 2017-05-25 19:53:38