Select2 4.0 - Keypress不会触发选择

时间:2015-06-29 07:15:32

标签: javascript jquery jquery-select2-4 jquery-select2-3

我已将Select2从版本3.5.2升级到版本4.0.

我们有很多形式,打字员填写了很多字段。

在旧版本(3.5.2)中,打字员会使用以下序列:

  1. 专注于元素
  2. 输入数字
  3. Tab同时选择结果并转到下一个字段
  4. 
    
    $("select").select2();
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
    
    <style>
      input {
      display:block;
        margin:10px 0;
      }
    </style>
    
    <input type=text/>
    <select>
      <option value="1">1. Option A</option>
      <option value="2">2. Option B</option>
      <option value="3">3. Option C</option>
      <option value="4">4. Option D</option>
      <option value="5">5. Option E</option>
    </select>
    
    <input type=text/>
    &#13;
    &#13;
    &#13;

    在版本4.0上,打字员必须:

    1. 专注于元素
    2. 点击Enter
    3. 输入数字
    4. 再次按Enter
    5. 按Tab键模糊并移至下一个字段
    6. &#13;
      &#13;
      $("select").select2();
      &#13;
      <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
      
      <style>
        input {
          display:block;
          margin:10px 0;
        }  
        
      </style>
      
      <input type=text/>
      
      <select>
        <option value="1">1. Option A</option>
        <option value="2">2. Option B</option>
        <option value="3">3. Option C</option>
        <option value="4">4. Option D</option>
        <option value="5">5. Option E</option>
      </select>
      
      <input type=text/>
      &#13;
      &#13;
      &#13;

      有没有办法绕过这种明显的功能降级? 我不想诉诸v3.5.2,因为我在<select>元素上使用了AJAX,这个版本不支持(必须使用隐藏的<input>标记)

1 个答案:

答案 0 :(得分:1)

要在焦点上触发select2的打开,请使用jQuery的本地&#34;焦点&#34;事件&amp; select2&#34; open&#34;事件。 重要提示:让它在DOM上准备就绪。

&#13;
&#13;
$( document ).ready(function() {
  
  $(".select2-selection").on("focus", function () { 
      $(this).parent().parent().prev().select2("open"); 
  });
   
});
&#13;
&#13;
&#13;