Select2 - 从 js 使其只读（未禁用！）

Posted 2023-05-07

【中文标题】Select2 - 从 js 使其只读（未禁用！）

【英文标题】：Select2 - make it readonly (not disabled!) from js

【发布时间】：2017-06-08 00:09:57

【问题描述】：

如何动态地将 select2 组合框设为只读？

这是我迄今为止尝试过的：

$('...').attr('readonly': 'readonly').trigger('change.select2');
$('...').attr('readonly': 'readonly').trigger('change');
$('...').select2().enable(false);

【问题讨论】：

.select2("readonly", true)

【参考方案1】：

这是使用css only 的最新select2（使用4.0.7 测试）的解决方案

/*Select2 ReadOnly Start*/
    select[readonly].select2-hidden-accessible + .select2-container 
        pointer-events: none;
        touch-action: none;
    

    select[readonly].select2-hidden-accessible + .select2-container .select2-selection 
        background: #eee;
        box-shadow: none;
    

    select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear 
        display: none;
    

/*Select2 ReadOnly End*/

【讨论】：

这太美了！

【参考方案2】：

见：http://select2.github.io/select2/

我做到了：

$("#modelname-fieldname").select2(disabled:'readonly');

地点：

modelname-fieldname 如：$form -> field($modelname, "fieldname") -> widget(Select2::classname(), [ ... ]); readonly 为真、假或字符串readonly

您可以选择在将鼠标悬停在select2 字段上时更改光标。

【讨论】：

这不再是正确答案了。 Select 没有 readonly 属性，并且此 (.select2(disabled:readonly);) 也已从 select2 中删除。这样做的方法是禁用选择（如果需要发送值，请使用隐藏输入）

第一个代码块帮助了我，我坐在disabled:'readonly' 并且它工作了;)

This is not the correct answer any more。该问题没有说明他们正在寻找什么版本的 select2 解决方案。

这适用于 4.0.7。 $("#YourSelect").select2( disabled:'readonly' )。只要确保你有 readonly 作为一个字符串（感谢 Seniorpreacher）。

【参考方案3】：

来自Select2 - Issue #3387 - Readonly Support的解决方案：

select[readonly].select2 + .select2-container 
  pointer-events: none;
  touch-action: none;

  .select2-selection 
    background: #eee;
    box-shadow: none;
  

  .select2-selection__arrow,
  .select2-selection__clear 
    display: none;
  

编辑：对于版本 > 4.07 - 正如下面的评论者正确指出的那样：

select[readonly].select2-hidden-accessible + .select2-container 
    pointer-events: none;
    touch-action: none;

    .select2-selection 
        background: #eee;
        box-shadow: none;
    

    .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear 
        display: none;
    

【讨论】：

这不起作用，您仍然可以选择选项。此外，第一条规则的结束标签也位于末尾。 @Ali Jamal 发布了适用于 select2 的最佳解决方案

@Ali Jamal 的解决方案更实用

【参考方案4】：

这对我有用：

.select2("readonly", true);
.select2("readonly", false);

【参考方案5】：

disabled 属性不是好办法，使用该属性的 html 元素会在提交表单时阻止 select 的数据发送。

对于生产模式，我必须找到并编写一个解决方案...它适用于 select 的原生 readonly 属性！ 这里，适用于具有 Select2 机制的 DOM 中的所有选择：

$('select[data-select2-id]').on('select2:opening', function (e) 
    if( $(this).attr('readonly') == 'readonly')  // Check if select tag is readonly.
        //console.log( 'readonly, can't be open !' );
        e.preventDefault();
        $(this).select2('close'); 
        return false;
    
    //else console.log( 'expandable/selectable' ); 
);

我已经通过完整的演示详细介绍了它here。

【讨论】：

这解决了我的问题。谢谢。

【参考方案6】：

下面的例子对我有用

$("#mySelect2Box").select2("readonly", true);

【参考方案7】：

这是jsfiddle中的一个工作示例

这是使用的脚本

    var $S1 = $("select[name=select1]");
    var $S2 = $("select[name=select2]");
  
  $('select').select2(
      width: '100%'
    );

    function readonly_select(objs, action) 
      if (action === true)
        objs.prepend('<div class="disabled-select"></div>');
      else
        $(".disabled-select", objs).remove();
    
    $('#setreadonly').on('click', function() 
      //readonly_select($(".select2"), true);

      $S1.attr("readonly", "readonly");
   
        $S2.attr("readonly", "readonly");

    );
    $('#removereadonly').on('click', function() 
      //readonly_select($(".select2"), false);
    
        $S1.removeAttr('readonly');
    $S2.removeAttr('readonly');

    );
    $("#abc").on('submit', function() 
      alert($("#abc").serialize());
    );

【参考方案8】：

我正在使用 Select 4.0，这对我很有效

$('#select2-element').on('select2:select', () => 
  $('#select2-element').data('select2').destroy();
  $('#select2-element').attr('readonly', true);
);