Question 44577 in Html Question posted in
Some basic documentation can be found here.

How do I create a HTML form select with sub select

I have a need to create some sub selects on a form. So when you hover/click on the option a subset appears eg.

Lorry|
Car|Saloon
   |Coupe
   |Estate
Van|

I know we can create a menu dropdown but I don’t know how the selection could be included in the form POST
I am not familiar with jQuery but proficient with JavaScript and PHP

If used unordered list with some css and java script I can get the effect I want but don’t know how to record the value select with out using 

    <form method="POST" action="#"> <ul>
    <li ><a href="#" >Lorry</a> </li>
    <li ><a href="#" >Car</a>
        <ul>
            <li><a href="#">Saloon</a> </li>
            <li><a href="#">Coupe</a>
            <li><a href="#">Estate</a>
            </li>
        </ul>
    </li>

    <li ><a href="" >Van</a>
        <ul>
            <li><a href="#">Basic</a>    </li>
            <li><a href="#">Luton</a> <ul>
                    <li><a href="#">Low Loader</a> </li>
                    <li><a href="#">Tail lift</a> </li>
                </ul>
            </li>
            <li><a href="#">Transit</a>    </li>
        </ul>
    </li>
</ul>
        <input type="text" name="Vehicle" id="Vehicle" hidden>
Tags:

2

Answers


  1. 0

    One thing you can do is make another select (outside of the first one) and let it dynamically adjust to the value of the first select. You can do this by adding on eventlistener to the first select:

    const vechicleTypeSelector = document.getElementById('vechicleTypeSelector')
vechicleTypeSelector.addEventListener('change', (event) => updateValuesOtherSelector())

    This is one way you can solve it. I don’t know if it is possible in raw HTML.

    Login or Signup to reply.
  2. 0

    Something like this could save some space, then you could add the category values to your options to indicate the category.

    <div class="custom-select" style="width:200px;">
 <form action="#">
  <select>
   <option value="0">Select car:</option>
   <optgroup label="Car" data-max-options="2">
   <option value="1">Saloon</option>
   <option value="2">Coupe</option>
   <option value="3">Estate</option>
   <optgroup label="Van" data-max-options="2">
   <option value="6">Astrovan</option>
   <option value="7">Windstar</option>
   <option value="8">Pacifica</option>
  </select>
 </form>
</div>

    https://jsfiddle.net/jasonbruce/L6nc9rwh/1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search