html多选-HTML原生下拉菜单选择，多选多个

Native select多选是指利用HTML中的select元素，设置multiple属性，让用户可以选择多个选项的功能。 在原生选择多选中，用户可以按住Ctrl键或Shift键，然后单击选项来选择多个选项。 选定的选项会突出显示。 当用户完成选择后，我们可以通过JavaScript获取所选择的选项。 可以使用select元素的options属性获取所有选项，然后遍历每个选项，通过判断selected属性是否为true来判断该选项是否被选中。 例如，假设我们有一个 id 为“mySelect”的原生 select 元素html多选，我们可以使用以下代码来获取所选选项： ```javascriptvarselectElement=document.getElementById("mySelect");varselectedOptions=[];for （变量=0；我<selectElement.options.length;i++){if(selectElement.options[i].selected){selectedOptions.push(selectElement.options[i].value);}}console.log(selectedOptions);```上述代码将获取到的被选中的选项值存贮在一个链表中html多选，并通过控制台输出。总结上去，原生select多选是一种在HTML中使用select元素来实现多选功能的方法。我们可以通过设置multiple属性，促使用户可以选择多个选项，并通过JavaScript来获取被选中的选项。

您可以使用 HTML 选择标记创建下拉菜单搜索框html，以便用户可以选择所需的值。它是收集要发送到服务器的数据的重要功能。

select 标记通常位于一个表单元素中，要选择的项目在另一个选项卡中编码。它也可以通过 form 属性与表单关联的独立元素。

在本教程中，我将向您展示如何使用 select 标记创建下拉菜单，以便您可以开始使用它从编码项目中收集数据。我还将向您展示如何设置选择标签的样式。

选择标记的属性

在深入研究如何使用选择标签创建下拉菜单之前，让我们讨论一下选择标签的属性。

这些是它的属性：

如何使用选择标签创建下拉菜单

要使用 select 标签创建下拉菜单，您首先需要一个表单元素。这是因为还有一个提交按钮（表单元素）将数据交给服务器。

      Language
      
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

我在中心下拉菜单和键中添加了一些简单的 CSS，并为正文设置了浅灰色背景：

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }
input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

为了使其更精细、更易于访问，您还可以将选择框附加到标签元素，以便在单击标签文本时获得焦点。您可以使用以下代码执行此操作：

      Language
      
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

我使用数字符号 （#） 作为操作属性的值，因此当您点击提交按钮时不会得到 404。

但是现在我们必须对 CSS 进行一些更改：

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }
input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

结果如下所示：

它并没有就此结束。默认情况下，当用户在登录页面时立即单击提交按钮时，将显示其中一个下拉项，并且将被选中。

但这不是一个好的用户体验。您可以通过将“选择语言”作为下拉列表中的第一项来防止它。

 
      Language
      
        Select a language
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

当用户

单击选择框以选择项目搜索框html，下拉菜单也会覆盖提交按钮，这也会影响用户体验。

可以使用 size 属性修改此设置，默认情况下，该属性在下拉列表中显示一定数量的项目和滚动条。

这也允许您放弃虚拟的第一个项目，因为单个项目将对用户手动可见。

 
      Language
      
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

使用 multiple 属性，用户可以从下拉列表中选择多个项。

 
      Language
      
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

默认情况下，这会使 4 个项目可见。若要选择多个项目，用户必须按住 Shift 或 Ctrl 键，然后使用键盘选择它们。

您可以使用选择和标记标记执行更多操作。您还可以使用标签内的元素来创建多层选择框。

您可以将现成的下拉菜单转换为多级选择框，如下所示：

      Language
      
        
          Select a language
          JavaScript
          PHP
          Java
          Golang
        
        
          Python
          C#
          C++
          Erlang
        
      
      

如何设置选择元素的样式

选择元素的样式通常很烦人，并且在浏览器中呈现不一致。但您可以尝试以下操作：

 
      Language
      
        Select a Language
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

在前面的 CSS 代码段中，我为选择框中的文本设置了以下外形规格：

这些天选择框看起来更好：

总结

这

在 HTML 中创建下拉列表和组合列表时，select 标记特别有用。

请记住，使用单选按钮，您只能从列表中选择一个项目 - 但使用复选框，您可以选择多个项目。“选择”更灵活，因为您可以将其设置为选择单个项目或多个项目。

选择标签的一个问题是很难设置样式。一个合理的解决方案是使用CSS库，该库为样式表单和选择元素提供良好的实用程序类。

我希望本教程能让您更熟悉 select 标签，以便您可以在项目中开始使用它。

感谢您阅读本文！

HTML 选择标签 – 如何制作下拉菜单或组合列表 作者：Kolade Chris