Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
Node is saved as draft in My Content >> Draft
  • select dropdown with checkbox

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    Comment on it

    Dropdown Check List is a javascript plugin based on the jQuery library that transforms a regular select html element into a dropdown checkbox list.

    HTML

    CSS

    body {
    font: normal 14px/100% "Andale Mono", AndaleMono, monospace; color:#fff; padding: 50px; width: 300px; margin: 0 auto; background-color: #374954; } a { color:#fff; } .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:#4F6877; display:block; padding: 8px 20px 5px 10px; min-height: 25px; line-height: 24px; 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: #4F6877; 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; } button { background-color: #6BBE92; width: 302px; border: 0; padding: 10px 0; margin: 5px 0; text-align: center;
    color: #fff; font-weight: bold; }

    Javascript

    $(".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 +
    

    ''; $('.multiSel').append(html); $(".hida").hide(); } else { $('span[title="' + title + '"]').remove(); var ret = $(".hida"); $('.dropdown dt a').append(ret);

          }
      });
    
    html select

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: