如何使select2只读?

问题描述 投票:0回答:10

我知道 select2 不存在“只读”功能。请检查这里。 我该如何实现这一目标? 任何帮助,将不胜感激。 谢谢。 注意:我不能使用禁用。如果我使用禁用,我将无法获得所选值的列表。

html jquery-select2 readonly
10个回答
9
投票

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

请浏览示例以在此处将 select2 设置为只读:Select 2

在js代码中:

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

您可以放置自己的 CSS,例如:

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

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

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

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


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

1
投票
试试这个:

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

编辑

对于那些使用 Select 2 版本 4+ 的人,新的方法应该是:

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

弄清楚问题后,这才是正确的做法:

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

1
投票
经过几次尝试阻止 Select2 项目的

expanding/opening 后,我找到了在每个具有 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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
投票
您无法按照新版本的 select2 将 select2 设置为只读,

点击 css hack 的链接,它就像一个魅力

https://stackoverflow.com/a/55001516/9945426


0
投票
试试这个:

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

0
投票
如果您只想使选择只读,您应该使用

$('select').select2({ readonly: true });
    

-1
投票
你可以使用

$("#id_example").select2({readonly:true});
禁用在 POST 操作中不发送数据。


-1
投票
$('#element_id').select2().readonly(true);
这可以将您的元素定义为只读,但仍然发送您的 POST 数据

© www.soinside.com 2019 - 2024. All rights reserved.