如何使用HTML中的多个属性创建下拉列表 [英] How can i make drop-down list using multiple attribute in HTML

问题描述

我尝试在下拉列表中使用多个属性，但是它可以正常工作，但是默认浏览器正在更改。有什么办法可以使它下拉。请参阅代码。

I am trying use multiple attributes where I make the dropdown list, however it is working but default browser changing. Is there any way I can make it drop-down. Please see the code..

    <select name="cars" multiple>
       <option value="volvo">Volvo</option>
       <option value="saab">Saab</option>
       <option value="opel">Opel</option>
       <option value="audi">Audi</option>
    </select>

但是，如果我删除多个属性，则只能看到下拉列表。当我使用多个控件时，为什么显示不同的HTML控件。我用蓝色标记了正确的控件，这就是我要使用多个控件的方式。有什么建议或想法吗？

But if I remove multiple attribute, I can see only drop-down list. Why is it showing different HTML control when I use multiple. I circled correct control with blue that's how I want to use multiple. Is there any suggestion or any ideas.

推荐答案

该代码使用选择器的大小＝ 6。属性，
css代码，选择器将显示限制在选项标签
的一行中。DOM操作将鼠标悬停在一个选择器上会显示整个选择器：悬停是选项大小= 6，鼠标指向选择一个或多个选择。选择器的父级是表单的框架，相对定位需要
，默认情况下绝对定位子级。这使您可以在显示数据的位置上达到最低限度。标签还会打开选择器，在将id属性和for属性组合到DOM中之后，浏览器将处理DOM。使用索引打开到下一个DOM元素的顶部，如果需要从父框架的底部边缘打开，请取消注释父顶部在框架顶部的高度的0％。

This code uses the selector's size = "6" attribute, css code the selector limits the display to one line of the options tag DOM action hovering over a selector shows the entire selector: hover is the option size = "6", the mouse points to selects one or more selections. The selector parent is the form's frame, it is needed for relative positioning, children are positioned absolutely by default. This allows you to get a minimalist place for presenting data. The label opens the selector also, the browser handles the DOM after the id attribute and the for attribute are combined in the DOM. With index opens to the top of the next DOM element, if you need to open from the bottom edge of the parent frame, uncomment bottom 0% of the parent's height at the top of the frame.

您可以通过将所选属性添加到第一个选项（其值为None）来扩展此属性，然后服务器将收到一条消息，提示您未选择任何选项，

You can extend this by adding the selected attribute to the first option with the value None, then the server will receive a message that no option has been selected,

您可以添加所需的或patterns属性进行验证，如果您输入imput作为添加选项来保存数据以供以后选择，则可以从用户那里获得他要排序但不过滤的数据信息。

you can add the required or patterns attribute for validation if you enter imput as an add option to save data for later selection, this allows you to get information from the user what data he wants to sort but not filter it.

CSS：

fieldset {
    position: relative;
    width: 300px;
}

select {
    position: absolute;
    height: 18px;
    overflow: hidden;
}

select:hover {
    position: absolute;
    height: auto;
    /* bottom: 10px; */
    z-index: 1;
    overflow: hidden;
}

HTML：

<form action="./shopping.php" method="GET">
    <fieldset>
        <legend>Clothes selection</legend>
        <label for="clothes">Select Ctrl+LMB:</label>
        <select multiple id="clothes" name="Outfit" size="6">
                <option value="Trousers" >Trousers</option>
                <option value="Hoodie">Hoodie</option>
                <option value="T-shirt">T-shirt</option>
                <option value="Trousers">Trousers</option>
                <option value="Hoodie">Hoodie</option>
                <option value="T-shirt">T-shirt</option>
        </select>
    </fieldset>
</form>

这篇关于如何使用HTML中的多个属性创建下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！