样式化 <select> 多个属性 [关闭]

Posted 2023-03-05

【中文标题】样式化 <select> 多个属性 [关闭]

【英文标题】：Styling <select> multiple Attribute [closed]

【发布时间】：2022-01-17 01:44:28

【问题描述】：

我刚刚发现了 select 标签的 multiple 属性。我在我的项目中实现了它，但它看起来不太好，我必须按住 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>

【问题讨论】：

你在寻找类似Select2的东西吗？

按住 ctrl 选择多个是众所周知的 UI/UX 元素，大多数需要选择多个的人都知道

“主要目标是从五个单词中选择一个或多个单词。” - 在这种情况下，我宁愿选择五个复选框+标签以...

“看起来更好”不是一个特定的问题陈述。请参阅How to Ask。

【参考方案1】：

正如@mrplungjan 提到的那样——“按住 ctrl 选择多个是众所周知的 UI/UX 元素，大多数需要选择多个的人都知道。”

基本上，大多数希望从选择菜单中选择多个选项的人应该熟悉 ctrl 功能，以选择多个。这就是为什么它是 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 以获取有关样式选择和选项元素的更多信息。应用 Bootstrap 库可能是最简单的方法。

【讨论】：

问题是关于样式，而不是行为。此外，如果这是一个重复的答案（正如使用非常旧的 jQuery 版本所建议的那样），它应该被标记为关闭，而不是重复。