样式 <select> 多个属性

Question

我刚刚发现 multiple 标签的 select 属性。我在我的项目中实现了它，但它看起来不太好，我必须按住 ctrl 才能选择多个，这有点烦人。我想知道是否有任何方法可以让它看起来更好，因为主要目标是 从五个单词中选择一个或多个单词。

和代码：

    <div class="form-group">
      <label class="col-form-label">Select some options</label>
        <select class="form-control" id="aluno" multiple>
          <option selected="true" disabled>Click to select</option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
          <option>Option 5</option>
        </select>
    </div>

Answer 1

正如@mrplungjan 提到的——“按住 ctrl 到 select 不止一个是众所周知的 UI/UX 元素，大多数需要 select 不止一件事的人都知道。 “

基本上，大多数希望从 select 菜单中 select 多个选项的人应该熟悉 ctrl 功能，select 多个。这就是为什么它是 select 和 option 元素的默认值。

但是，您可以编写一个脚本来解决这个问题，并获得您想要的输出。使用 jQuery.

查看此示例

$('option').mousedown(function(e) {
    e.preventDefault();
    var originalScrollTop = $(this).parent().scrollTop();
    console.log(originalScrollTop);
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var self = this;
    $(this).parent().focus();
    setTimeout(function() {
        $(self).parent().scrollTop(originalScrollTop);
    }, 0);
    
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="form-group">
      <label class="col-form-label">Select some options</label>
        <select class="form-control" id="aluno" multiple>
          <option selected="true" disabled>Click to select</option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
          <option>Option 5</option>
        </select>
    </div>

查看 here 以获取有关样式 select 和选项元素的更多信息。应用 Bootstrap 库可能是最简单的。

样式 <select> 多个属性

Styling <select> multiple Attribute

html

css

twitter-bootstrap