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

Question

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

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

我想做的很简单。我想在选择选项后将用户选择定义为文本。我已经尝试过这个，但它不起作用：

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

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

Answer 1

因为您正在设置 HTML（破坏性地），所以每次单击div 时，HTML 都会被替换。您最好在document.ready上设置html，并使用隐藏/显示或创建您在设置内容时设置的标志并每次单击检查它，以便您知道不要重新创建菜单。