将 UL LI 单选框转换为多选框

Question

I really need the help of an expert here on this site.我真的需要这个网站上专家的帮助。 I'd like to be able to, add on and build functionality such that my custom UL LI single select boxes, would be able to handle multiple user selections.我希望能够添加和构建功能，以便我的自定义 UL LI 单选择框能够处理多个用户选择。

Here's the typical scenario, the user holds down the CTRL Key on their keyboard and selects multiple values from the select box.这是典型的场景，用户按住键盘上的 CTRL 键并从选择框中选择多个值。

Here is a quick fiddle: http://jsfiddle.net/c2ezuw24/1/这是一个快速的小提琴： http : //jsfiddle.net/c2ezuw24/1/

Here is the existing Markup:这是现有的标记：

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}

        .dropdown dd, .dropdown dt, .dropdown ul {
            margin:0px;
            padding:0px;
        }
        .dropdown dd {
            position:relative;
        }
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}

        .dropdown a:hover { color:#000;}

        .dropdown dt a:hover, .dropdown dt a:focus {
            border: 1px solid rgb(128,128,128);
        }

        .dropdown dt a {
            background:#e4dfcb url(arrow.png) no-repeat scroll right center;
            display:block;
            padding-right:20px;
            border:1px solid rgb(170,170,170);
            width:150px;
        }
        .dropdown dt a span {
            cursor:pointer;
            display:block;
            padding:5px;
        }
        .dropdown dd ul {
           background:#e4dfcb none repeat scroll 0 0;
           border:1px solid rgb(170,170,170);

           display:none;
           left:0px;
           padding:5px 0px;
           position:absolute;
           top:2px;
           width:auto;
           min-width:170px;
           list-style:none;
       }
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}

        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
        .flagvisibility { display:none;}


    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".dropdown img.flag").addClass("flagvisibility");

            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });

            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });

            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();
            });


            $("#flagSwitcher").click(function() {
                $(".dropdown img.flag").toggleClass("flagvisibility");
            });
        });
    </script>
</head>
<body>
    <dl id="sample" class="dropdown">
        <dt><a href="#"><span>Please select the country</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
                <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li>
                <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li>
                <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li>
                <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li>
                <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li>
                <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li>
            </ul>
        </dd>
    </dl>
    <span id="result"></span>
</body>
</html>

Answer 1

use built in html feature.使用内置的 html 功能。 http://jsfiddle.net/2v8foz90/ http://jsfiddle.net/2v8foz90/

<select multiple>
  <option value="DEDE">Hello</option>
  <option value="FEFE">bonjour</option>
  <option value="SESE">Ciao</option>
  <option value="AEAE">hallo</option>
</select>

将 UL LI 单选框转换为多选框

问题描述

1 个解决方案

解决方案1
-3 2015-10-27 21:45:38

将 UL LI 单选框转换为多选框

问题描述

1 个解决方案

解决方案1 -3 2015-10-27 21:45:38

解决方案1
-3 2015-10-27 21:45:38