jQuery-选择/选项+单击/模糊冲突的问题

情况如下： 我有一个带有div的垂直菜单。每个div都有一个id。当我单击一个div时，它会使用以下方法在div中添加一个选择列表：

$ ( '#mydiv' ).on ( 'click', function ( ) {
  var select = '<select name="menuList"><option value="test">test</option>...</select>';
  $ ( '#mydiv' ).html ( select );
} ) ;

---

此外，另一个问题是，当我从列表中选择一个选项时，所选字段不再是用户的选择，而是返回到列表的第一个位置。基本上，这个问题不是真正的问题，因为我立即用包含他选择的文本字段替换列表，但我想了解为什么会发生这种情况。

因为您在单击事件上以破坏性方式设置HTML，所以每次单击div时，HTML都会被替换。您最好在document.ready上设置html，然后使用hide/show或创建一个标记，在设置内容时设置该标记，并在每次单击时进行检查，这样您就知道不需要重新创建菜单。

您可以给出一个JSFIDDLE吗事实上，模糊是在定义div之后才定义的。但您可能是对的，我将在启动时创建元素，并根据单击来隐藏/显示它们。

$ ( 'select[name="menuList"]').on ('blur', function ( ) {
  $ ( '#mydiv' ).html ( $ ( 'select[name="menuList"] option:selected' ).val ( ) );
} );