[英]How can I make a div the focus after selecting an item from a combo box?
How do I make a div the focus after a combobox item is chosen?选择组合框项目后如何使 div 成为焦点? 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.
我的问题是,一旦用户从组合框中选择了一个项目(例如:Data1 或 Data2),就会显示表中的关联记录。 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.
这样做的目的是使页面 508 兼容。 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>
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.例如,您可能有一个 css 类,用于设置所选元素的样式,并向下拉列表添加一个事件侦听器,该下拉列表将在目标表的第一列内查找所选选项值,并将该类添加到具有文本内容的所有行你正在寻找。
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.我尝试将焦点事件分派到表行,同时使用
:focus
之类的 css 规则,但由于我忽略的原因,该方法没有按预期工作,不得不依赖于有意删除/分配一个类。
$('#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.