Question

我正在尝试使用多个属性来制作下拉列表，但它正在运行但是默认浏览器正在更改。有什么方法可以让它下拉。请参阅代码..

    <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控件。我用蓝色圈出了正确的控制，这就是我想要多次使用的方法。有什么建议或任何想法。

Answer 1

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

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

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

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>

Answer 2

您可以访问网络[http://getbootstrap.com/components/#navbar]

复制代码，它有Css和HTML

或者你可以在Youtube上看看如何使用Bootstrap

Answer 3

尝试Bootstrap Multiselect JS库：

http://davidstutz.github.io/bootstrap-multiselect/

如何在HTML中使用多个属性制作下拉列表

3 个答案: