logo标签列表

如何使select2只读？

htmljquery-select2readonly
9
我知道select2没有“readonly”功能。请查看这里。 我该怎么做呢？ 任何帮助都将不胜感激。 谢谢。 注意：我不能使用disabled。如果我使用disabled，我将无法获取所选值的列表。
你读完整个线程了吗？这里有一个解决方案 https://jsfiddle.net/ujdbcy3d/14/ - dippas
10个回答
9
我想这个问题已经得到解决，或者在更高的版本中可能会有所改进，因为这对我起作用了。
请查看以下示例，以使select2只读：Select 2 在js代码中：
$("select").select2("readonly", true);

您可以放置自己的CSS，例如：

.select2-container.select2-container-disabled .select2-choice {
  background-color: #ddd;
  border-color: #a8a8a8;
}
1
对于select2 v4只读解决方案，请参考：https://dev59.com/v1gR5IYBdhLWcg3wDJpN#55001516 - egvrcn
3

正如问题所述：如何使select2只读？，并且正如用户指出的那样：select2没有“readonly”功能。根据select2团队开发人员的说法：阅读此文。

我想补充几点：

  • 禁用不等于只读！要小心。
  • $(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'});
简单而美丽 - kaarto
3
$('.js-example-basic-single').select2({
  disabled: true
});

在页面加载后，为我渲染一个已禁用属性。
提醒一下，带有禁用属性的字段不会在表单中发送。
2

试试这个：

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

编辑：

对于使用 Select 2 版本 4+ 的用户，现在的做法应该是：

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

在澄清问题之后，这是正确的做法:

$('select').select2().enable(false);
2
如果被禁用，它仍然会发送到表单数据中吗？我猜不会吧？ - fraktal12
1
在尝试阻止Select2项目的扩展/打开过程进行几次测试后，我发现了一种方法，可以在具有Select2属性ID的每个本机选择标签上应用侦听器...并检测打开事件时本机标记是否为只读。
$('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>

0
0

试试这个：

$(".example_element").css("pointer-events","none");
0

如果您只想让选择变为只读模式，应该使用

$('select').select2({
  readonly: true
});
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便其他人可以确认你的回答是否正确。你可以在帮助中心找到有关如何撰写良好回答的更多信息。 - Community
-1

您可以使用

$("#id_example").select2({readonly:true});

禁用在POST操作中发送数据。

-1
$('#element_id').select2().readonly(true);

这可以定义您的元素为只读，同时仍然发送您的POST数据

你的回答可以通过提供更多支持信息来改进。请 [编辑] 添加更多细节，例如引用或文档，以便他人可以确认您的答案是否正确。您可以在 帮助中心 中找到有关编写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接