如何使select2只读？

Posted 2023-05-07

【中文标题】如何使select2只读？

【英文标题】：How make select2 readonly?

【发布时间】：2018-08-07 00:17:01

【问题描述】：

我知道 select2 不存在“只读”功能。请查看here。 我该如何做到这一点？ 任何帮助，将不胜感激。 谢谢。 注意：我不能使用禁用。如果我使用禁用，我将不会获得选定值的列表。

【问题讨论】：

您阅读了所有主题吗？这是一个解决方案jsfiddle.net/ujdbcy3d/14

【参考方案1】：

我想这个问题已经解决了，或者可能适用于更高版本，因为这对我有用。

请通过示例在此处将 select2 设为只读：Select 2

在js代码中：

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

你可以把自己的 CSS 像这样：

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

【讨论】：

对于 select2 v4 只读解决方案：***.com/a/55001516/1209239

【参考方案2】：

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

在为我解决页面加载后呈现禁用属性。

提醒一下，带有 disabled 属性的字段不会在表单上发送

【参考方案3】：

试试这个：

$('select option:selected').attr('disabled','disabled');

编辑：

对于那些使用 Select 2 version 4+ 的人来说，新的做法应该是：

$("select").prop("disabled", true); // instead of $("select").enable(false);

澄清问题后，这是正确的做法：

$('select').select2().enable(false);

【讨论】：

如果禁用，还是会在表单数据中发送？猜不到？

【参考方案4】：

经过几次尝试阻止 扩展/打开 Select2 项目的测试后，我找到了在每个具有 Select2 属性 id 的本地选择标签上应用侦听器的方法...如果原生标签是readonly，则检测打开事件。

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

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

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;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


<main class="container">

<div role="box">
  <pre></pre>
  <select class="form-control inputFocusable" id="select_base" name="select_base" tabindex="-1" aria-hidden="true">
    <option value="A">Item A</option>
    <option value="B">Item B</option>
    <option value="C">Item C</option>
  </select>
</div>

<div role="box">
  <pre>readonly</pre>
  <select class="form-control inputFocusable" id="select_demo_1" name="select_demo_1" tabindex="-1" aria-hidden="true" readonly>
    <option value="A">Item A</option>
    <option value="B">Item B</option>
    <option value="C">Item C</option>
  </select>
</div>

<div role="box">
  <pre>readonly="readonly"</pre>
  <select class="form-control inputFocusable" id="select_demo_2" name="select_demo_2" tabindex="-1" aria-hidden="true" readonly="readonly">
    <option value="A">Item A</option>
    <option value="B">Item B</option>
    <option value="C">Item C</option>
  </select>
</div>



</main>

<div role="box">
  <pre>readonly ?</pre>
  <input id="button_demo_2" type="button" value="Fix / Remove">
</div>

【参考方案5】：

正如问题所说：如何使 select2 只读？，并且正如用户指出的那样：select2 不存在“只读”函数。根据 select2 团队开发者：read this.

我只想补充几点：

禁用不等于只读！小心点。 $(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');