联系表格的下拉列表答案

【问题标题】：Drop-down lists for contact form联系表格的下拉列表
【发布时间】：2014-03-13 17:11:33
【问题描述】：

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

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

<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>

【问题讨论】：

标签： html css contact-form

【解决方案1】：

为此尝试 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>

【讨论】：

【解决方案2】：

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

Check out this

上面的 Saurabh Goyal 建议使用 .我也想过提出同样的建议。但用于分类&我不认为那是你想要的。

【讨论】：

【解决方案3】：

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

This site 有一个包含 30 个 HTML5 导航菜单示例的列表，this site 有大量 Javascript 和 JQuery 示例。

希望其中之一可以帮助您获得想要的东西。

【讨论】：

如何在联系表单中实现像他们这样的下拉菜单？
轻松集成到您的联系表单中的最佳选择是 HTML5/CSS3。以script-tutorials.com/css3-vertical-multicolor-3d-menu 为例，这只是列表顶部的 CSS 样式。为了正确填充您的表单，我想最好的办法是实现一些 JQuery 以使用您单击的菜单项的值设置表单上的字段。

【解决方案4】：

您可以为此使用 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>

【讨论】：