Question

我正在对下拉菜单项选择执行操作。

但是我在localhost上测试时没有做任何动作，甚至没有显示菜单项。虽然我已经包含了所有文件。

代码：

<html lang="en">
    <head>
        <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="sticky-footer-navbar.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script> 

    <script>
    $(".dropdown-menu li a").click(function(){
    alert("hi");
      var selText = $(this).text();
      $('label').css('color',selText);
    });

 </script>
    </head>
<body>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">yellow</a>

                </li>
                <li><a href="#">green</a>

                </li>
                <li><a href="#">black</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>
</body>
</html>

这段代码出了什么问题？

UPDATE1

    <script>
    $( document ).ready(function() {
    alert("hi");
      var selText = $(this).text();
      $('label').css('color',selText);
    });
 </script>

没有变化

结果如下：

更新代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script> 
<link href="css/bootstrapa.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">    

    </head>
<body>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">yellow</a>

                </li>
                <li><a href="#">green</a>

                </li>
                <li><a href="#">black</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>
    <script>
$( document ).ready(function() {
    alert("hi");
      var selText = $(this).text();
      $('label').css('color',selText);
    });
 </script>
</body>

</html>

Answer 1

尝试在jQuery UI引用之前包含jQuery lib。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 2

试试这个：

$(".dropdown-menu li a").on('click', function(){
    alert("hi");
      var selText = $(this).text();
      $('label').css('color',selText);
});

Answer 3

您需要在文档准备好时定义单击功能。在编辑中，您只需尝试从单击函数$(document).ready()函数移动代码。在该上下文中，$(this)未引用select元素。试试这个：

$(document).ready(function() {
    $(".dropdown-menu li a").click(function(){
        var selText = $(this).text();
        $('label').css('color',selText);
    });
});

Answer 4

这是你的代码：

<!doctype html>
<html lang="en">
    <head>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    </head>
<body>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">yellow</a>

                </li>
                <li><a href="#">green</a>

                </li>
                <li><a href="#">black</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>         


    <script>
        $(".dropdown-menu li a").click(function(){
        alert("hi");
          var selText = $(this).text();
          $('label').css('color',selText);
        });
    </script>
</body>
</html>

希望这有帮助。

jquery失败，下拉菜单选择操作

4 个答案: