CODEWITHSUNDEEP
javascriptnode.jsexpressmongoose
Nenad M
Nenad M

Reputation: 139

How to show table with data related to some ID when I select option with value of that ID?

I have multiple select where I have data from mongodb in each loop:

<div class="form-group">
  <select name="electoralUnit" multiple class="form-control" size="40">
    {{#each electoralUnits}}
      <option id="electoralUnit" value="{{id}}" onclick="showDiv(this)">{{name}}</option>
    {{/each}}
  </select>
</div>

and I have a table where I need to stay hidden until something is selected from multiple selection:

<table class="table table-striped table-sm table-hover" id="hidden_div" style="display:none;">
  <thead>
    <tr>
      <th scope="col">Hours</th>
      <th style="display:none">Electoral Units</th>
      <th scope="col">Turnouts</th>
      <th scope="col">Votes</th>
    </tr>
  </thead>
  <tbody>
    {{#each voterTurnouts}}
      <tr>
        <th scope="row">{{turnoutByHour}}</th>
        <td style="display:none">{{electoralUnit.name}}</td>
        <td>{{voterTurnout}}</td>
        <td>{{safeVoter}}</td>
        <td><a href="/voterTurnouts/edit/{{id}}" class="btn btn-outline-primary btn-sm">Edit</a></td>
      </tr>
    {{/each}}
  </tbody>
</table>

I tried with this javascript code:

function showDiv(id) {
   if (id.value == id) {
     document.getElementById('hidden_div').style.display = "block";
   } else {
     document.getElementById('hidden_div').style.display = "none";
   }
}

As you can see, I put showDiv function in option onclick and hidden_div in table id. My table is now hidden but not appear when I click on something. I suppose that id in if statement is not right. I use mongoose and because of that id in option is in curly brackets and I don't know how to catch that in javascript function. Can someone explain?

Upvotes: 2

Views: 120

Answers (1)

MaxZoom
MaxZoom

Reputation: 7753

I have put code example for your reference, hopefully it will help.

function showDiv(select) {
  // Get selected options
  var options = select && select.options;
  var selectedRows = [];

  for (var opt of options) {
    if (opt.selected) selectedRows.push(opt.value);
  }

  // Display selected rows
  var table = document.getElementById('hidden_div');
  var trs = table.querySelectorAll('tr');
  var hasOptionSelected = false;

  for (var tr of trs) {
    if (selectedRows.includes(tr.dataset.row)) {
      hasOptionSelected = true;
      tr.style.display = "block";
    }
    else {
      tr.style.display = "none";
    }
  }

  table.style.display = (hasOptionSelected)? "block" : "none";
}
<div class="form-group">
  <select name="electoralUnit" multiple class="form-control" onChange="showDiv(this)">
      <option value="1">First</option>
      <option value="2">Second</option>
  </select>
</div>

<table class="table table-striped table-sm table-hover" id="hidden_div" style="display:none;">
  <thead>
    <tr>
      <th scope="col">Hours</th>
      <th style="display:none">Electoral Units</th>
      <th scope="col">Turnouts</th>
      <th scope="col">Votes</th>
    </tr>
  </thead>
  <tbody>
    <tr data-row='1'>
      <th scope="row">{{turnoutByHour1}}</th>
      <td style="display:none">{{electoralUnit.name}}</td>
      <td>{{voterTurnout}}</td>
      <td>{{safeVoter}}</td>
      <td><a href="/voterTurnouts/edit/{{id}}" class="btn btn-outline-primary btn-sm">Edit</a></td>
    </tr>
    <tr data-row='2'>
      <th scope="row">{{turnoutByHour2}}</th>
      <td style="display:none">{{electoralUnit.name}}</td>
      <td>{{voterTurnout}}</td>
      <td>{{safeVoter}}</td>
      <td><a href="/voterTurnouts/edit/{{id}}" class="btn btn-outline-primary btn-sm">Edit</a></td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions