Question

我有一个简单的下拉列表：

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

和JavaScript用于选择以下选项之一：

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

  $(".btn:first-child").html($(this).text()+' <span class="caret"></span>');

});

我的下拉工作不起作用，我从下拉列表中选择的选项没有被选中，事实上我的script.js文件甚至没有出现在源代码中，而我尝试在chrome中调试。

我在我的html文件顶部初始化我的脚本文件，如

<script type="text/javascript" src="source/script.js"></script>

我做错了什么？

Answer 1

您需要在文档准备好后运行代码：

来自jQuery：

$( document ).ready(function() {

或

$(function() {

如果在文档准备好之前运行代码，则代码无法运行，因为$（＆＃34; .dropdown-menu li a＆＃34;）等元素尚未出现在文档中。

所以请准备好您的代码。

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

            $(".btn:first-child").html($(this).text()+' <span class="caret"></span>');

        });
    });

Answer 2

您的代码似乎没有任何问题（我在这里有一个工作示例https://jsfiddle.net/xzfq7q5t/）但是您的脚本标记的路径可能是错误的。

您的文件结构是什么样的？换句话说，您的script.js文件在哪里与您的html页面相关？它在同一个文件夹中吗？它在'源'文件夹中吗？

<script type="text/javascript" src="source/script.js"></script>

以上是说，转到我当前的文件夹，然后进入源文件夹，然后查找script.js

Bootstrap下拉选择值不起作用

2 个答案: