如何使用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个事件。您可以在this page上的鼠标事件类别中使用onmouseover或其他内容。

Answer 2

您无法将<select>附加到<select>，因为这样做会导致invalid markup。

要分离不同类型的内容，您可以使用 <optgroup> ：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，您可以在用户选择特定选项时构建 新 <select>框。在以下示例中，选择Mercedes将创建一个辅助选择框，以便从以下位置选择梅赛德斯模型：

＆＃13;

＆＃13;

//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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

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，而不会超出屏幕，请参见https://popper.js.org/

您也可以将div与某些a一起使用，而不要使用select元素-请参见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/

希望这会有所帮助，否则请在更多讨论和实施中添加评论。