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

像这样你没有近距离标志，但它的工作方式几乎相同。

＆＃13;

// 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();
}

＆＃13;

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

＆＃13;

在按钮中显示下拉选项

1 个答案: