你如何使用 javascript 在另一个选择中嵌套一个选择？

Question

Html 不允许执行以下操作：

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

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

所以基本上我想做的是在另一个选择中嵌套另一个选择。

显然这不能这样做，有没有人知道如何做到这一点，或者如果我使用像 jQuery 这样的东西（我不熟悉它）怎么做？

谢谢。

我找不到以最佳方式解释它的方法，但是您可以看到每个类别都有一个子类别选项。

Answer 1

没有仅onmouse事件。 您可以在此页面上的鼠标事件类别中使用onmouseover或其他内容。

Answer 2

您不能将<select>附加到<select> ，因为这样做会导致无效标记。

要区分不同类型的内容，您可以使用<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>

或者，您可以在用户选择特定选项时构建一个新的<select>框。 在以下示例中，选择Mercedes将创建一个辅助选择框以从中选择 Mercedes 型号：

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

希望这有帮助！ :)

Answer 3

这只是一个想法。

假设您有 2 个选择，其中 id= se1 , id= se2

现在假设我们展示se1第一然后在一个悬停se1的选项，显示se2选择-只是旁边的se1选择。 然后在se2的选项选择上，隐藏se2

这可以工作，如果你有不同的选择（如se2 ），用于不同的选择se1

您可以使用document.createElement("SELECT")动态创建内部选择，请参阅此 - https://www.w3schools.com/jsref/dom_obj_select.asp

现在，这可以达到任意数量的级别。 要正确放置，多级的select s，而不离开屏幕，请参阅https://popper.js.org/

你也可以用一些a s 而不是select元素的div - 见https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dropdown

通常上下文菜单有嵌套的选择，请参阅下面的一些想法：
- 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/

希望这会有所帮助，否则请对更多讨论和实施发表评论。