在按钮中显示下拉选项

-1

我有一个下拉列表，我想要做的是当我从这个列表中选择一个选项时，它显示一个按钮下的选项，用户可以选择多个选项，所以我想要显示许多按钮与一个密切的标志，以便用户可以删除该选项，我该怎么做，使用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>

来源

2017-05-25 stephjhonny

为什么不直接使用多选插件在那里？比创建自己的更好。看看[选择]（https://harvesthq.github.io/chosen/），看看是否会做你想要的 –

按钮或复选框？ – Tushar

这样你就还没有结束的迹象，但它的工作几乎相同的方式。

// 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>

来源

2017-05-25 19:53:38 pauloaap

我有一个问题，请在你的解决方案，当我添加一个选项，然后删除它，然后我想再次添加它我不能那样做，你能解决它吗？ – stephjhonny

在按钮中显示下拉选项

回答

相关问题