Javascript 只单击一次更改下拉列表值为什么？ $（函数（）{ $（“.LIA”下拉菜单）。单击（函数（）{ $（“.dropdown:first child”）.text（$（this.text（））； $（“.dropdown:first child”）.val（$（this.text（））； }); });_Javascript_Drop Down Menu

Javascript 只单击一次更改下拉列表值为什么？ $（函数（）{ $（“.LIA”下拉菜单）。单击（函数（）{ $（“.dropdown:first child”）.text（$（this.text（））； $（“.dropdown:first child”）.val（$（this.text（））； }); });

javascript drop-down-menu

Javascript 只单击一次更改下拉列表值为什么？ $（函数（）{ $（“.LIA”下拉菜单）。单击（函数（）{ $（“.dropdown:first child”）.text（$（this.text（））； $（“.dropdown:first child”）.val（$（this.text（））； }); });,javascript,drop-down-menu,Javascript,Drop Down Menu,当我从下拉菜单中选择值时，下拉标题由菜单更改（例如，布料、玩具、家具等）。但是，在此之后，下拉菜单消失了。为什么？因为这一行$（“.dropdown:first child”）.text（$（this.text（））表示要将整个的内容更改。下拉菜单为单击元素的文本，更改选择器以选择右侧元素，即。下拉切换，如： $（函数（）{ $（“.LIA”下拉菜单）。单击（函数（）{ $（“.dropdown toggle”）.text（$（this.text（））； }); }); 首

当我从下拉菜单中选择值时，下拉标题由菜单更改（例如，布料、玩具、家具等）。但是，在此之后，下拉菜单消失了。为什么？

因为这一行

$（“.dropdown:first child”）.text（$（this.text（））

表示要将整个

的内容更改。下拉菜单

为单击元素的文本，更改选择器以选择右侧元素，即

。下拉切换

，如：

$（函数（）{
$（“.LIA”下拉菜单）。单击（函数（）{
$（“.dropdown toggle”）.text（$（this.text（））；
});
});










首先，位于
（或
）之外的
无效li
是一个列表元素，它不应该存在于列表之外
然后，$（“.dropdown:first child”）
使用.dropdown
类选择第一个元素（而不是其中的第一个元素）。也就是说，你孤独的
元素。用一些文本替换元素中的所有内容，使其消失。改为选择$（“.dropdown toggle”）

最后，您可以通过以下方式优化代码并加速代码：

缓存$（“.dropdown toggle”），而不是每次单击时在DOM中访问它并构建jQuery对象
使用e.currentTarget.innerText
，而不是每次单击$（this.text（）


这将代码简化为高效的单行程序

const$dropdownthoggle=$（“.dropdownthoggle”）
$（“.dropdown menu li a”）。单击（e=>$dropdownttoggle.text（e.currentTarget.innerText））









我无法复制该问题：或者我不明白。我建议先修复您的标记。2
标签位于底部，没有打开的div标签，并且悬挂着li
包装ul
结构，但不在ul内。如果我用值显示插入符号，效果会更好。
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

   <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Object Type <span class="caret"></span></a>
          <ul class="dropdown-menu">
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Toy</a></li>
        <li><a href="#">Furniture</a></li>
        <li><a href="#">Gift</a></li>
        <li><a href="#">Household</a></li>
        <li><a href="#">Instrument</a></li>
          </ul>
        </li>
  </div>
</div>

<script>
$(function(){

    $(".dropdown-menu li a").click(function(){

      $(".dropdown:first-child").text($(this).text());
      $(".dropdown:first-child").val($(this).text());

   });

});
</script>

</body>
</html>