How do you nest a select inside of another select using javascript?

Question

Html doesnt allow to do the next:

<script>
  function openwindow(){
    document.getElementById("a").innerHTML = "<select><option>etc</option>
</select>"
  }
</script>

<select onmouse = "openwindow()">
  <option id = "a" value = "a">A        
  </option>
</select>

So basiclly what im trying to do is nesting another select inside another select.

Obviously this cant be done like this, does any one has an idea how this can be done or if I use something like jQuery (i am not familliar with it) how can it be done?

Thanks.

I couldnt find a one that explains it in the best way, but you can see that every category has an option for subcategories.

Answer 1

There is no onmouse event only. You could use onmouseover or something in Mouse Events category on this page .

Answer 2

You can't append a <select> to a <select> , as doing so would result in invalid markup .

To seperate out your different types of content, you can make use of an <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>

Or, alternatively, you could build a new <select> box upon the user selecting a particular option. In the following example, selecting Mercedes will create a secondary select box to choose a Mercedes model from:

 //Create array of options to be added var array = ["Mercedes 1","Mercedes 2","Mercedes 3","Mercedes 4"]; //Create and append select list var selectList = document.createElement("select"); selectList.id = "mySelect"; var target = document.getElementById('new'); //Create and append the options for (var i = 0; i < array.length; i++) { var option = document.createElement("option"); option.value = array[i]; option.text = array[i]; selectList.appendChild(option); } var selection = document.getElementsByTagName('select')[0]; selection.onclick = function() { if (selection.value == 'mercedes') { target.appendChild(selectList); } }

 <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> <div id="new"></div>

Hope this helps! :)

Answer 3

This is only an idea.

Say you have 2 selects with id= se1 , id= se2

Now assume we show se1 first Then on hover of a se1 's option, show se2 select - just beside the se1 select. Then on an option selection in se2 , hide se2

This can work if you have different selects (like se2 ) for different options of se1

You can create a inner selects dynamically, using document.createElement("SELECT") , see this - https://www.w3schools.com/jsref/dom_obj_select.asp

Now, this can go any number of levels. To correctly place, the select s for multi-level, without going out of screen, see https://popper.js.org/

You can also have div with some a s instead of select elements - see https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dropdown

Often Context menu have nested selects, See below ones for some ideas:
- https://blueprintjs.com/docs/#core/components/context-menu
- https://www.npmjs.com/search?q=contextmenu
- https://www.telerik.com/kendo-react-ui/components/layout/menu/context-menu/

Hope this helps, else ping in comments on more discussion & implementation.