jquery - 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 并使用 hide / show 或创建您在设置内容时设置的标志并在每次单击时检查它，这样您就知道不要重新创建菜单。