Question

有没有办法在联系表单的下拉列表中添加额外的“子菜单”？所以它在技术上就像下拉导航一样。

以下是我的联系表单的下拉列表。我被问到是否可以添加其他选项，比如现有合作伙伴。因此，当它们悬停在该项目上时，它会扩展到其他选项。

<label for="hear">How did you hear about us?  </label>
            <select class="contact-drop-down"  name="hear" id="hear">
                <option>Click to choose</option>
                <option value="1">Existing Partner</option>
                <option value="2">Word of mouth</option>
                <option value="3">Brochure</option>
                <option value="4">Email mailshot</option>
                <option value="5">Google</option>
                <option value="6">Yahoo</option>
                <option value="7">Bing</option>
                <option value="8">Other search engine</option>
                <option value="9">Other</option>
            </select>

Answer 1

您无法在HTML中使用标准select进行扩展，但您可以使用Javascript或HTML5和CSS3。

This site列出了30个HTML5导航菜单示例，this site有大量Javascript和JQuery示例。

希望其中一个可以帮助你得到你想要的东西。

Answer 2

您可以使用optgroup标记。

<select>
  <optgroup label="Existing Partners">
    <option value="existing_partner_a">Partner A</option>
    <option value="existing_partner_b">Partner B</option>
    <option value="existing_partner_others">Others</option>
  </optgroup>
</select>

Answer 3

不能将子菜单添加到实际的下拉控件中。但是你可能会发现许多自定义控件。

Check out this

上面的Saurabh Goyal建议使用。我也想到了同样的建议。但用于分类和我不认为那就是你想要的。

Answer 4

尝试使用optgroup。例如

   <select>
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
</select>

Answer 5

您可以使用@saurabh Goyal所述的联系表单7中的optgroup来实现此目的

[a link](https://codepen.io/adrian-ortega/pen/Ivzjh)

请通过此链接进行操作。

联系表单的下拉列表

5 个答案: