使用选择器选择项目后如何自动聚焦按钮？答案

【问题标题】：How can I automatically focus the button after choose an item with the select picker?使用选择器选择项目后如何自动聚焦按钮？
【发布时间】：2018-01-12 01:59:24
【问题描述】：

当用户从列表框中选择一个项目时，焦点仍然存在，所以如果他按下“回车”，它仍然存在。我想在pick之后自动改变焦点。

我正在使用这个 jquery 函数：

$(function() {
  $("nextStep").focus();
});

"nextStep" 是按钮的类，它可以工作，但我想在组合框 aria-expanded 的属性为 false 时实现它。你能解释一下我该怎么做吗？

这是列表框：

<button type="button" class="btn dropdown-toggle btn-default" 
data-toggle="dropdown" role="button" data-id="tn_workType" 
title="Disoccupato" aria-expanded="false">
  <span class="filter-option pull-left">Disoccupato</span>&nbsp;
  <span class="bs-caret">
    <span class="caret"></span>
  </span>
</button>

这是下一步按钮：

<a href="javascript:void(0)" class="btn btn-white btn-rounded nextStep" 
tabindex="0">Avanti →</a>

【问题讨论】：

如果nextStep是一个类，那么它不应该是$(".nextStep").focus()

标签： jquery html class listbox focus

【解决方案1】：

$(function() {
$('select').change(function (e) {
   $('.nextStep').focus();
});   
  $('.nextStep').click(function(){
  alert("Avanti buttonn clicked")
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<select class="btn btn-toogle btn-default">
<option>Option1</option>
<option>Option2</option>
</select>

When the user choose an item from the list box, the focus remain there, so if he press "enter" it remains there. I'd like to automatically change the focus after the pick.

I'm using this jquery function:

$(function() {
  $("nextStep").focus();
});
"nextStep" is the class of the button and it works, but I'd like to make it happen when the attribute of the combobox aria-expanded is false. Can you explain me how can I do this please?

This is the listbox:


This is the nextStep button:

<a href="javascript:void(0)" class="btn btn-white btn-rounded nextStep" 
tabindex="0">Avanti →</a>

【讨论】：