Question

我知道＆＃34; readonly＆＃34; select2不存在功能。请检查here。我如何实现这一目标？任何帮助，将不胜感激。谢谢。注意：我不能使用禁用。如果我使用禁用，我将无法获得所选值的列表。

Answer 1

我认为问题已经解决，或者可能对我有用。

请在以下示例中将select2设置为只读：Select 2

在js代码中：

$("select").select2("readonly", true);

您可以像这样放置自己的CSS：

.select2-container.select2-container-disabled .select2-choice {
  background-color: #ddd;
  border-color: #a8a8a8;
}

Answer 2

$('.js-example-basic-single').select2({
  disabled: true
});

页面加载为我解决后，呈现一个禁用的属性。

提醒一下，具有禁用属性的字段不会在表单上发送

Answer 3

尝试一下：

$（'select option：selected'）。attr（'disabled'，'disabled'）; 编辑：

**对于使用Select 2 4+版本的用户，新方法应该是：

$（“ select”）。prop（“ disabled”，true）; //代替$（“ select”）。enable（false）; 澄清问题后，这是正确的解决方法：

$（'select'）。select2（）。enable（false）;

Answer 4

该问题说：如何将select2设为只读？，并且用户指出： select2不存在“只读”功能。根据select2团队开发人员的说法：read this.

我只想添加几件事：

disabled与只读不同！小心点。
$(element).select2({ disabled: true });仅适用于V4之前的版本。实际上，标记为正确的答案是针对V3的。

话虽如此，我想分享一个简单的建议：

销毁该元素并将其设置为只读。 $(element).select2('destroy').attr("readonly", true)
如果您需要再次使用它，可以随时给他打电话。 $(element).select2()

提示：

如果您希望它看起来像上一个元素，只需删除默认的CSS样式即可：$(element).select2('destroy').attr("readonly", true).css({'-moz-appearance': 'none','-webkit-appearance': 'none'});

Answer 5

在尝试阻止 Select2 项扩展/打开的几次测试后，我找到了在每个具有 Select2 属性 id 的本地选择标签上应用侦听器的方法... 并在打开事件时检测原生标签是否为 column "zone" does not exist。

readonly

对于 Select2 的更多自定义，我们可以添加一些 CSS ...

$('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' );
    }
});

select[readonly] ~ .select2.select2-container .selection [role="combobox"] {
    background: repeating-linear-gradient(
45deg
, #b4d2e4, #b4d2e4 10px, rgba(255, 255, 255, 0.15) 10px, rgba(255, 255, 255, 0.15) 20px) !important;
    box-shadow: inset 0 0 0px 1px rgba

jQuery(document).ready(function($) {

  // Implement Select2
  $( 'select' ).select2({
      placeholder: "Saisissez un mot pour aide à saisie",
      tags: true, // allow create new
      width: '100%'
  });

  // Just extra button to swap readonly
  $('#button_demo_2').off().on( 'click',function(e){
    console.log( $('#select_demo_2').attr('readonly') );
    if( typeof( $('#select_demo_2').attr('readonly') ) == 'undefined' ){
      $('#select_demo_2').attr('readonly','readonly');
    }else{
      $('#select_demo_2').removeAttr('readonly');
    }
  } );
  
  
  // Demo code...
  $('select[data-select2-id]').on('select2:opening', function (e) {
      if( $(this).attr('readonly') == 'readonly') {
          console.log( 'can not open : readonly' );
          e.preventDefault();
          $(this).select2('close');
          return false;
      }else{
          console.log( 'can be open : free' );
      }
  });


});

*{
  margin : 0;
  padding : 0;
}
body {
    height: 100vh;
    background-color: #215a82;
    font-family: 'Roboto',sans-serif;
    background: linear-gradient(180deg,#215a82 0%,#152135 100%) no-repeat;

    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
}
.container {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

div[role="box"]{
    padding:1rem;
    margin:2rem
    display: block;
}

pre {
    line-height: 1rem;
    height: 1.5rem;
    color: white;
}


select[readonly] ~ .select2.select2-container .selection [role="combobox"] {
    background: repeating-linear-gradient(45deg, #dadada, #dadada 10px, rgba(255, 255, 255, 0.66) 10px, rgba(255, 255, 255, 0.66) 20px) !important;
    box-shadow: inset 0 0 0px 1px #77859133;
}

input{
    display: block;
    padding: 0.5rem;
}

Answer 6

使用禁用选项设置为 true ，使初始化。

$('.js-example-basic-single').select2({
  disabled: true
});

如何使select2 readonly？

6 个答案: