select2 选择后改变焦点

Question

嘿，所以我有几个 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');
  
});

Answer 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>