带有下拉列表设计问题的多选

Question

页面加载隐藏下拉列表值但显示全部。

当我点击下拉显示值时。

小提琴代码：https://jsfiddle.net/ivinraj/hbd864pm/2/

<select multiple="" rows="1" id="Shift" class="form-control" name="Shift">
  <option>Please select one</option>
  <option value="51">C</option>
<option value="54">B</option>
<option value="58">A</option>
<option value="62">S</option>
</select>

希望低于 1。

Answer 1

看看这个插件是否有帮助：https://artroom.app/plugin/tagEditor/demo.html

并检查此示例：

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
  return function(elem) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});
$(document).ready(function() {
  $('#addTagBtn').click(function() {
    $('#tags option:selected').each(function() {
      $(this).appendTo($('#selectedTags'));
    });
  });
  $('#removeTagBtn').click(function() {
    $('#selectedTags option:selected').each(function(el) {
      $(this).appendTo($('#tags'));
    });
  });
  $('.tagRemove').click(function(event) {
    event.preventDefault();
    $(this).parent().remove();
  });
  $('ul.tags').click(function() {
    $('#search-field').focus();
  });
  $('#search-field').keypress(function(event) {
    if (event.which == '13') {
      if (($(this).val() != '') && ($(".tags .addedTag:contains('" + $(this).val() + "') ").length == 0)) {
        $('<li class="addedTag">' + $(this).val() + '<span class="tagRemove" onclick="$(this).parent().remove();">x</span><input type="hidden" value="' + $(this).val() + '" name="tags[]"></li>').insertBefore('.tags .tagAdd');
        $(this).val('');

      } else {
        $(this).val('');

      }
    }
  });

});

body {
  font-family: tahoma;
}

ol,
ul {
  list-style: outside none none;
}

#container {
  margin: 0 auto;
  width: 60rem;
}

.tags {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #ccc;
  display: table;
  padding: 0.5em;
  width: 100%;
}

.tags li.tagAdd,
.tags li.addedTag {
  float: left;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.tags li.addedTag {
  background: none repeat scroll 0 0 #019f86;
  border-radius: 2px;
  color: #fff;
  padding: 0.25em;
}

.tags input,
li.addedTag {
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: none;
  display: block;
  padding: 0.5em;
}

.tags input:hover {
  border: 1px solid #000;
}

span.tagRemove {
  cursor: pointer;
  display: inline-block;
  padding-left: 0.5em;
}

span.tagRemove:hover {
  color: #222222;
}

P,
H1 {
  text-align: center;
}

p {
  color: #ccc;
}

h1 {
  color: #6b6b6b;
  font-size: 1.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <ul class="tags">
    <li class="addedTag">Web Deisgn<span onclick="$(this).parent().remove();" class="tagRemove">x</span><input type="hidden" name="tags[]" value="Web Deisgn"></li>

    <li class="addedTag">Web Develop<span onclick="$(this).parent().remove();" class="tagRemove">x</span><input type="hidden" name="tags[]" value="Web Develop"></li>

    <li class="addedTag">SEO<span onclick="$(this).parent().remove();" class="tagRemove">x</span><input type="hidden" name="tags[]" value="SEO"></li>
    <li class="tagAdd taglist">
      <input type="text" id="search-field">
    </li>
  </ul>
</div>