dropdown

dropdown

by TheDiamondDoge

HTML

<div style="display:inline-block">

  <table id="bp">
    <tr>
      <td>Business Unit</td>
      <td colspan='6' class="cyan">
        <div id="menu">
          <div id="options" style="text-align: center">
            BU filter
          </div>
          <div id="filters" class="closed">
            <ul>
              <li><input class="bu" type="checkbox">All</li>
              <li><input class="bu" type="checkbox" checked>MLV</li>
              <li><input class="bu" type="checkbox">SMB</li>
              <li><input class="bu" type="checkbox">TX</li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Project</td>
      <td colspan='6' class="cyan">
        <div id="menu">
          <div id="options" style="text-align: center">
            Value 1
          </div>
          <div id="filters" class="closed">
            <ul>
              <li><input class="project" type="checkbox">Check me</li>
              <li><input class="project" type="checkbox">And me</li>
              <li><input class="project" type="checkbox" checked>And me too</li>
            </ul>
          </div>
        </div>
      </td>
    </tr>

    <tr id="header">
      <td width="250px">Year</td>
      <td class="cyan">
        <div id="menu">
          <div id="options" style="text-align: center">
            Year
          </div>
          <div id="filters" class="closed">
            <ul>
              <li><input class="year" type="checkbox" checked>2018</li>
              <li><input class="year" type="checkbox">2019</li>
              <li><input class="year" type="checkbox" checked>2020</li>
              <li><input class="year" type="checkbox">2021</li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
      <td colspan="6"><br/></td>

    </tr>
  </table>
</div>
<div style="display:inline-block; vertical-align: top">
  <button id="send">Click!</button>
</div>
</div>

CSS

#menu,
#options,
#filters {
  border: 1px solid black;
}

#menu {
  width: 300px;
}

#filters {
  /* display: none; */
  position: absolute;
  background-color: white;
  width: inherit;
}

#filters li {
  list-style-type: none;
  margin-left: -25px;
}

.open {}

.closed {
  display: none
}

JavaScript

var bu = [];
var projects = [];
var years = [];


$(function() {
  $("div#options").on('click', function() {
    if ($(this).siblings().eq(0).hasClass("closed")) {
      $(this).siblings().eq(0).attr('class', 'open');
      $(".open").each(function() {
       });
    } else {
      $(this).siblings().eq(0).attr('class', 'closed');
    }




    /* $(this).parent().siblings().each(function() {
       $(this).children().eq(1).css("display", "none");
     });
     $(this).siblings().toggle(); */

  });

  $("#send").on("click", function() {
    var data = [];
    alert("clicked");
    bu = checkBU();
    projects = checkProjects();
    years = checkYears();
    data.push(bu, projects, years);
    alert(data);
    //alert(bu);
    //alert(projects);

  });
});

function closeAll() {

}

function checkYears() {
  var years = [];
  $(".year").each(function() {
    //alert("each running");
    if ($(this).is(':checked')) {
      //alert($(this).parent().text());
      years.push($(this).parent().text());
    }
  });
  return years;
}

function checkProjects() {
  var projects = [];
  $(".project").each(function() {
    //alert("each running");
    if ($(this).is(':checked')) {
      //alert($(this).parent().text());
      projects.push($(this).parent().text());
    }
  });
  return projects;
}

function checkBU() {
  var bu = [];
  $(".bu").each(function() {
    //alert("each running");
    if ($(this).is(':checked')) {
      //alert($(this).parent().text());
      bu.push($(this).parent().text());
    }
  });
  return bu;
}