分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – Select2：预选项目并通过templateSelection正确呈现，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

当使用 Select2 v4时,建议的(实际上是正确的)以编程方式设置所选值的方法是操纵基础选择元素,添加所需的<选项>您想要的元素,使用$SELEctElement.val(< value>)设置值并触发.trigger(‘change’)事件,以便 SELEct2插件将从底层的SELEct元素更新自身.你可以看到这个 here.

这个问题是当你定义了一个templateSELEction时,它不仅返回所选值的文本,还返回一个完整的HTML DOM(例如,你可以应用样式,添加图像,图标等等,并将其作为渲染选择返回) .

templateSELEction接受输入,因为它来自数组数据源或ajax数据源等.每个项目代表一个选项,但它可能不仅仅是id和id和文本. templateSELEction可以考虑项目的许多属性来生成渲染输出.

您只能在< option>中定义值和文本.元件.您无法定义要设置为选定的实际对象(项),以便templateSELEction可以生成正确的输出.

有没有办法只使用SELEct2的API来实现这个目标？

如果没有,是否还有其他解决方法可以通过templateSELEction正确呈现代码中的值？

解决方法

templateSELEction是基于选项的文本内容构建对象的回调.返回和显示的对象与选项的内容不同.选项仍然是简单的id和文本内容.样式分开处理.

定义templateSELEction时,定义一个将选项作为参数的函数,这样您就可以访问文本和选项的id作为可用变量.此函数将返回根据您的模板构建的对象.

看这个例子：

$(document).ready(function() {
  $('.js-example-basic-single').SELEct2({
    width: 'width: 100%',templateSELEction: formatState
  });
});

$('.js-example-basic-single').val('WY');
$('.js-example-basic-single').trigger('change');

function formatState(statE) {
  console.log(statE);
  var $state = $(
    '<span>Content from the template: ' + state.element.text + ' ' + state.element.value + '</span>'
  );

  return $state;
}

<script src="https://code.jquery.com/jquery-2.2.4.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.min.js"></script>
<SELEct class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</SELEct>

编辑：

由于您可以访问该状态,因此您可以访问使用动态数据定义的任何属性.并且您可以访问该元素,因此您也可以拥有数据属性.这使您可以做更精细的事情：

$(document).ready(function() {
  $('.js-example-basic-single').SELEct2({
    width: 'width: 100%',templateSELEction: formatState,data: [{
      id: 0,text: "Wyoming"
    },{
      id: 1,text: "Alabama",SELEcted: true,disabled: true,},{
      id: 2,text: "Washington",customProp: 'something'
    }]
  });
});



function formatState(statE) {
  console.log(statE);
  var $state 
  if (state.customProp) {
    $state = $(
      '<span>Content from the template: ' + state.element.text + ' ' + state.element.value + ' and my custom property is <strong>' + state.customProp + '</strong></span>'
    );
  } else {
  $state = $(
      '<span>Content from the template: ' + state.element.text + ' ' + state.element.value + '</span>'
       );
  }

  return $state;
}

<script src="https://code.jquery.com/jquery-2.2.4.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.min.js"></script>
<SELEct class="js-example-basic-single" name="state">
</SELEct>