How can I make a div the focus after selecting an item from a combo box?-CodePudding

How do I make a div the focus after a combobox item is chosen? My problem is that once the user selects an item from the combo box (ex: Data1 or Data2), the associated record from the table displays. Therefore, once a selection is made from the drop-down, attention should turn to the table. The goal of this is to make the page 508 compliant. This is my code. Thanks in advance.

$('#table-filter').click(function() {
  $('#table-wrap').focus();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><strong>Please select a location from the dropdown menu:</strong></p>

<p><select id="table-filter" >
<option>Select Me</option>
<option>Data1</option>
<option>Data2</option>
<option>Data3</option>
</select>
</p>




<div id="table-wrap" tabindex="1">
<table id="table1" style=" width: 100%;"><thead>
<tr>
<th >Column1</th>
<th >Column2</th>

</tr>

</thead><tbody>
<tr>
<td tabindex="0">Data1</td>

<td tabindex="0">Pass</td>
</tr>

<tr>
<td tabindex="0">Data2</td>
<td tabindex="0">In Progress</td>

</tr>

<tr>
<td>Data3</td>
<td>Complete</td>

</tr>
</tbody></table>

CodePudding user response：

Since you asked "(...) the associated record from the table displays. (...)"

You may for example have a css class you use to style the selected element and add an event listener to the dropdown that will look for the selected option value inside the first column of the target table and add that class to all rows having the text content you are looking for.

I chose the style of the selected row as:

.selected{
  outline: solid red;
}

But you might choose any style you prefer according to how much invasive it's required to be. The problem with focus is that it won't outline the row by default and it's mainly focused (no pun intended) on input elements.

I tried dispatching the focus event to the table row while having a css rule like :focus but for reason I ignore, the approach didn't work as expected and had to rely on removing/assigning a class on purpose.

$('#table-filter').change(function() {
  const pickedValue = $(this).val();
  //removes the selected class from any table tr having it
  $('#table1 tbody tr.selected').removeClass('selected');
  //adds the selected class to any row having as the first cell content the same value as pickedValue
  $('#table1 tbody tr').each((i, tr)=>{       
    if ( $(tr).find('td:first-child').text() == pickedValue )
      $(tr).addClass('selected');
      
  });  
});

.selected{
  outline: solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><strong>Please select a location from the dropdown menu:</strong></p>

<p>
  <select id="table-filter" >
    <option>Select Me</option>
    <option>Data1</option>
    <option>Data2</option>
    <option>Data3</option>
  </select>
</p>

<div id="table-wrap" tabindex="1">
<table id="table1" style=" width: 100%;">
  <thead>
    <tr>
      <th >Column1</th>
      <th >Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td tabindex="0">Data1</td>
      <td tabindex="0">Pass</td>
    </tr>
    <tr>
      <td tabindex="0">Data2</td>
      <td tabindex="0">In Progress</td>
    </tr>
    <tr>
      <td>Data3</td>
      <td>Complete</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Use on change

$('#table-filter').on("change", function() {
  $('#table-wrap').focus();
});

#table-wrap:focus {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><strong>Please select a location from the dropdown menu:</strong></p>

<p>
  <select id="table-filter">
    <option>Select Me</option>
    <option>Data1</option>
    <option>Data2</option>
    <option>Data3</option>
  </select>
</p>
<div id="table-wrap" tabindex="1">
  <table id="table1" style=" width: 100%;">
    <thead>
      <tr>
        <th>Column1</th>
        <th>Column2</th>

      </tr>

    </thead>
    <tbody>
      <tr>
        <td tabindex="0">Data1</td>

        <td tabindex="0">Pass</td>
      </tr>

      <tr>
        <td tabindex="0">Data2</td>
        <td tabindex="0">In Progress</td>

      </tr>

      <tr>
        <td>Data3</td>
        <td>Complete</td>

      </tr>
    </tbody>
  </table>