在按钮中显示下拉选项
问题描述:
我有一个下拉列表,我想要做的是当我从这个列表中选择一个选项时,它显示一个按钮下的选项,用户可以选择多个选项,所以我想要显示许多按钮与一个密切的标志,以便用户可以删除该选项,我该怎么做,使用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>
答
这样你就还没有结束的迹象,但它的工作几乎相同的方式。
// 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>
+0
我有一个问题,请在你的解决方案,当我添加一个选项,然后删除它,然后我想再次添加它我不能那样做,你能解决它吗? – stephjhonny
为什么不直接使用多选插件在那里?比创建自己的更好。看看[选择](https://harvesthq.github.io/chosen/),看看是否会做你想要的 –
按钮或复选框? – Tushar