2014-02-14 32 views
0

有沒有辦法在聯繫表格的下拉列表中添加一個額外的「子菜單」?所以它在技術上會像下拉式導航一樣工作。聯繫表格的下拉列表

下面是我的聯繫表單的下拉列表。我被問到是否可以添加其他選項讓現有合作伙伴說。因此,當他們懸停在該項目上時,它會擴展到其他選項。

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

回答

0

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

你不能懸停擴大與內HTML標準select,但你可以用Javascript或HTML5和CSS3。

This site有一個30個HTML5導航菜單示例的列表,並且this site有大量的Javascript和JQuery示例。

希望其中的一個可能會幫助你得到你想要的。

+0

我該如何去實現一個像他們一樣的下拉菜單到聯繫人窗體? – user3189826

+0

您可以輕鬆整合到您的聯繫表單中,這是一個HTML5/CSS3之一。以http://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/爲例,這只是列表頂部的CSS樣式。爲了正確地填充表單,我想最好的辦法是實現一些JQuery,用你點擊的菜單項的值設置表單上的字段。 – RobF

0

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

Check out this

SAURABH戈亞爾建議使用。我也想過提出相同的建議。但用於分類&我不認爲這就是你想要的。

0

嘗試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> 
0

爲此,可以使用OPTGROUP只有在@saurabh戈亞爾

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

如說請通過此鏈接acieve聯繫表格7實現。