Question

我想使用复选框选项构建一个下拉列表。

我发现这个非常简单的例子： http://codepen.io/ElmahdiMahmoud/pen/hlmri

我正在努力做到这一点。所以我复制并粘贴了这样的代码：

aspx代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestDropdownChecklist.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js.js"></script>
    <link rel="stylesheet" href="css.css" />
</head>
<body>

    <dl class="dropdown">

        <dt>
            <a href="#">
                <span class="hida">Select</span>
                <p class="multiSel"></p>
            </a>
        </dt>

        <dd>
            <div class="mutliSelect">
                <ul>
                    <li>
                        <input type="checkbox" value="Apple" />Apple</li>
                    <li>
                        <input type="checkbox" value="Blackberry" />Blackberry</li>
                    <li>
                        <input type="checkbox" value="HTC" />HTC</li>
                    <li>
                        <input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
                    <li>
                        <input type="checkbox" value="Motorola" />Motorola</li>
                    <li>
                        <input type="checkbox" value="Nokia" />Nokia</li>
                </ul>
            </div>
        </dd>

    </dl>
</body>
</html>

但是当我点击select时，没有任何反应。

请告诉我，我做错了什么？或者我应该做一些我没做过的事情？

js.js

/*
    Dropdown with Multiple checkbox select with jQuery - May 27, 2013
    (c) 2013 @ElmahdiMahmoud
    license: http://www.opensource.org/licenses/mit-license.php
*/

$(".dropdown dt a").on('click', function () {
    $(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function () {
    $(".dropdown dd ul").hide();
});

function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function (e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});


$('.mutliSelect input[type="checkbox"]').on('click', function () {

    var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
        title = $(this).val() + ",";

    if ($(this).is(':checked')) {
        var html = '<span title="' + title + '">' + title + '</span>';
        $('.multiSel').append(html);
        $(".hida").hide();
    }
    else {
        $('span[title="' + title + '"]').remove();
        var ret = $(".hida");
        $('.dropdown dt a').append(ret);

    }
});

Answer 1

由于您的 js.js 文件位于文档的<head>，因此它在<body>中存在任何内容之前就已运行。您有两个选择：

在结束<script type="text/javascript" src="js.js"></script>标记之前移动</body>，使其最后运行

在$(document).ready(function(){ /*your code here*/ });中包含 js.js 的内容，以便在加载文档之前它不会运行。像这样：

/*
Dropdown with Multiple checkbox select with jQuery - May 27, 2013
(c) 2013 @ElmahdiMahmoud
license: http://www.opensource.org/licenses/mit-license.php
*/
$(document).ready(function(){
    $(".dropdown dt a").on('click', function () {
        $(".dropdown dd ul").slideToggle('fast');
    });

    $(".dropdown dd ul li a").on('click', function () {
        $(".dropdown dd ul").hide();
    });

function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function (e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
    });


    $('.mutliSelect input[type="checkbox"]').on('click', function () {
        var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
        title = $(this).val() + ",";

        if ($(this).is(':checked')) {
            var html = '<span title="' + title + '">' + title + '</span>';
            $('.multiSel').append(html);
            $(".hida").hide();
        }
        else {
            $('span[title="' + title + '"]').remove();
            var ret = $(".hida");
            $('.dropdown dt a').append(ret);
        }
    });
});

点击＆＃34; a＆＃34;什么都不开火

aspx代码

js.js

1 个答案: