如何在没有第三方库的情况下实现多个复选框下拉列表

Question

如何在没有第三方库的情况下实现多个复选框下拉。

我们希望下拉列表中没有jquery和javascript中的复选框。我们要纯服务器端控制。

Answer 1

纯服务器端控制意味着您将只依赖HTML标准。

HTMLSelect元素有一个https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple属性，它允许用户选择多个值。

HTML规范不需要特定的呈现布局，使浏览器不受任何约束。在大多数情况下，所选的选项都是高亮的，加上多个属性使select元素放松其下拉样式(您可以使用https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size属性降低其高度)。

​

<!-- The second value will be selected initially -->
<p>Maintain <kbd>Ctrl</kbd> key down to select multiple elements</p>
<select name="multi" multiple size="2">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
  <option value="value4">Value 4</option>
  <option value="value5">Value 5</option>
  <option value="value6">Value 6</option>
  <option value="value7">Value 7</option>
  <option value="value8">Value 8</option>
  <option value="value9">Value 9</option>
  <option value="value10">Value 10</option>
</select>

​

如果您改变主意使用Javascript，您可以实现这个详细的答案的建议，因为它只需要很少的额外Javascript和css，但没有库。