Question

我有以下问题：

<select id="select2" style="width:250px">
  <option value=""></option>
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
</select>

<input id="disableBtn" type="button" value="Disable" />

<input id="enableBtn" type="button" value="Enable" />

虽然禁用了选择框，但如果在关注选择框后按下空格键，则仍然会弹出下拉列表。

以下是js代码：

$('#select2').select2({placeholder: 'Select an option',minimumResultsForSearch: 'Infinity'});
$('#disableBtn').on('click', () => {$('#select2').attr('disabled', 'true');});
$('#enableBtn').on('click', () => {$('#select2').removeAttr('disabled');});

Answer 1

我认为 select2 jQuery组件存在问题。因此，这是一个采用解决方法来实现目标的片段：

＆＃13;

$('#myselect').select2({
  containerCssClass: 'mysel-con',
  placeholder: 'Select an option',
  minimumResultsForSearch: 'Infinity'
});

$('#disableBtn').on('click', ()=>{
  $('#myselect').select2('enable', false);
  $('.mysel-con').css('pointer-events', 'none');
});

$('#enableBtn').on('click', ()=>{
  $('#myselect').select2('enable');
  $('.mysel-con').css('pointer-events', '');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.min.js"></script>

<select id="myselect" style="width:250px">
  <option value=""></option>
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
</select>

<input id="disableBtn" type="button" value="Disable" />

<input id="enableBtn" type="button" value="Enable" />

＆＃13;

containerCssClass选项用于定义用作select2容器的jQuery选择器的css类。

因此，将CSS属性pointer-events：none添加到此容器即可达到目标。

注意使用 select2.full 版本（请参阅。https://github.com/select2/select2/tree/master/dist/js）。

Fiddle updated.

禁用模式下的Select2下拉列表

1 个答案: