聯系表格的下拉列表

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。

該站點列出了30個HTML5導航菜單示例，並且該站點提供了大量的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

不，您不能將子菜單添加到實際的下拉控件中。 但是您可能會發現許多自定義控件。

看看這個

上面建議使用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)

請通過此鏈接訪問acieve。