Question

我有jquery UI 1.7和jquery 1.3.2版本。我想要一个带有多个检查清单的组合框，如图所示。有人可以使用纯HTML和javscript或JQuery为我提供一些简单的解决方案。对于下面的一个，我不知道如何使用它

但我不想要任何复杂的代码或导入的库，最好是简单的javascript或jQuery，例如jQuery的（ “ABCD”）。multipselect。还请告诉我如何以及在何处放置文件等

谢谢

艾登

Answer 1

我认为这会满足您的需求

<html>
<head></head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<style>


.dropdown dd,
.dropdown dt {
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  margin: -1px 0 0 0;
}

.dropdown dd {
  position: relative;
}

.dropdown a,
.dropdown a:visited {
  color: #fff;
  text-decoration: none;
  outline: none;
  font-size: 12px;
}

.dropdown dt a {
  background-color: #d3d3d3;
  display: block;
  padding: 8px 20px 5px 10px;
  min-height: 25px;
  line-height: 25px;
  overflow: hidden;
  border: 0;
  width: 272px;
}

.dropdown dt a span,
.multiSel span {
  cursor: pointer;
  display: inline-block;
  padding: 0 3px 2px 0;
}

.dropdown dd ul {
  background-color: #bdbdbd;
  border: 0;
  color: #fff;
  display: none;
  left: 0px;
  padding: 2px 15px 2px 5px;
  position: absolute;
  top: 2px;
  width: 280px;
  list-style: none;
  height: 100px;
  overflow: auto;
}

.dropdown span.value {
  display: none;
}

.dropdown dd ul li a {
  padding: 5px;
  display: block;
}

.dropdown dd ul li a:hover {
  background-color: #fff;
}



</style>
<body>
<dl class="dropdown"> 

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

    <dd>
        <div class="mutliSelect">
            <ul>
                <li>
                    <input type="checkbox" value="All" />Select All</li>
                <li>
                    <input type="checkbox" value="January" />January</li>
                <li>
                    <input type="checkbox" value="February" />February</li>
                <li>
                    <input type="checkbox" value="March" />March</li>
                <li>
                    <input type="checkbox" value="April" />April</li>
                <li>
                    <input type="checkbox" value="May" />May</li>
                <li>
                    <input type="checkbox" value="June" />June</li>
                <li>
                    <input type="checkbox" value="July" />July</li>
                <li>
                    <input type="checkbox" value="August" />August</li>
                <li>
                    <input type="checkbox" value="September" />September</li>
                <li>
                    <input type="checkbox" value="October" />October</li>
                <li>
                    <input type="checkbox" value="November" />November</li> 
                <li>
                    <input type="checkbox" value="December" />December</li> 
            </ul>
        </div>
    </dd>

</dl>
<script>
$(".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();
});


function appendToMultiSelect(title){
    var itemLen = $('.multiSel span').length;
    if( itemLen > 0){
        var lastItem = $('.multiSel span').last();
        lastItem.append(",") ;
    }

    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel').append(html);
}

$('.mutliSelect input[type="checkbox"]').change(function(){
if($(this).val() != "All")
{
    var title = $(this).val() ;

  if ($(this).is(':checked')) {
    appendToMultiSelect(title);
    $(".hide").hide();
  } else {
    $(".mutliSelect").find('li input[value=All]').prop('checked', false);
    $('span[title="' + title + '"]').remove();
    var itemLen = $('.multiSel span').length;
    if( itemLen > 0){
        var lastItem = $('.multiSel span').last();
        lastItem.html(lastItem.html().replace(',','')) ;
    }
    else{
    $(".hide").show();
    }

    var ret = $(".hide");
    $('.dropdown dt a').append(ret);

  }
}
else
{
    //clear selected items
    $('.multiSel').html('');
    if ($(this).is(':checked')) {
        $(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
        var option = $(this);
        option.prop('checked', true);
        title = option.val() ;
        appendToMultiSelect(title);
        });
        $(".hide").hide();
    }
    else{
        $(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
        var option = $(this);
        option.prop('checked', false);
        });
        $(".hide").show();
    }
}
});

</script>
</body>
</html>

简单的jQuery或javascript多个下拉列表

1 个答案: