select2 选择后改变焦点

Posted 2023-05-07

【中文标题】select2 选择后改变焦点

【英文标题】：select2 change focus after select

【发布时间】：2021-09-09 03:12:57

【问题描述】：

嘿，所以我有几个 select2 选项，在我选择我的第一个下拉选项后，它会进入事件侦听器并打印“用户选择”。然而，焦点并没有改变到下一个 select2。非常感谢您的帮助。

   <select id = "test1" required tabindex="1">
           <option value = '1'>item1 </option>
   </select>

     <select id = "test2" required tabindex="2">
            <option value = '2'>item1 </option>
    </select>

<select id="test3" required tabindex="3" style="width: 30%; height:36px;">
  <option value='1'>item1 </option>
  <option value='2'>item2 </option>
</select>

<select id="test4" required tabindex="4" style="width: 30%; height:36px;">
  <option value='1'>item1 </option>
  <option value='2'>item2 </option>
</select>

    $('#test1').select2( );
    $('#test2').select2( );
$('#test3').select2();
$('#test4').select2();

$('select').on('select2:select', function () 
  $(this).next('select').focus();

  // Do something
  console.log('user selected');
  
);

【参考方案1】：

您可以使用$(this).nextAll("select:first") 获取兄弟姐妹选择的参考，然后使用.select2("open") 打开您的下一个选择框。

演示代码：

$('#test1').select2();
$('#test2').select2();
$('#test3').select2();
$('#test4').select2();

$('select').on('select2:select', function() 
  //use select or use select#yourid where you need to focus
  $(this).nextAll('select:first').select2('open');
  console.log('user selected');
);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<select id="test1" required tabindex="1" style="width: 30%; height:36px;">
  <option value='1'>item1 </option>
  <option value='2'>item2 </option>
</select>

<select id="test2" required tabindex="2" style="width: 30%; height:36px;">
  <option value='2'>item1 </option>
  <option value='5'>item5</option>
</select>
<select id="test3" required tabindex="2" style="width: 30%; height:36px;">
  <option value='2'>item1 </option>
  <option value='5'>item5</option>
</select>
<select id="test4" required tabindex="2" style="width: 30%; height:36px;">
  <option value='2'>item1 </option>
  <option value='5'>item5</option>
</select>

【讨论】：

谢谢，但这仅适用于 2 选择。您将如何更改它以使其更适合 4 次选择。 （刚刚编辑了帖子）对不起，我应该在我的 og 帖子中制作 4 而不是 2