为什么在 SnapAppointments 的引导选择上设置标题会清除元素的值？

Question

我正在使用 SnapAppointments bootstrap-select (https://github.com/snapappointments/bootstrap-select/) 并得到以下奇怪的行为（可能是错误？）。

加载页面时，

option

会更新，设置所需的值，但是当我稍后尝试检索它时（通过延迟证明），它会丢失。

问题似乎是

title

属性（设置为

title

、

data-title

或通过脚本设置）；为了更容易地演奏小提琴，我留下了脚本版本。请参阅脚本的第 10 行。

简单来说，当存在

title

集时，价值就会丢失......而我有点需要标题。

var jData = {"data":[
  {"label":"Option 1","value":"1"},
  {"label":"Option 2","value":"2"},
  {"label":"Option 3","value":"3"},
  {"label":"Option 4","value":"4"},
  {"label":"Option 5","value":"5"}]
};

// comment / uncomment this line to reproduce the problem
$('#test').attr('title', 'test title');

// simulate a dynamic data load
$('#test').find('optgroup').remove();
$('#test').find('option').remove();

jData.data.forEach(function (o) {
  o.option = $('<option/>').attr('value', o.value).text(o.label).appendTo($('#test'))[0];
});

$('#test').selectpicker('destroy').selectpicker().selectpicker('val', '2');
console.log('value after selectpicker(\'val\', \'2\') : ' + $('#test').val());

$('#test').find('option[value=2]').attr('selected','selected');
console.log('value after attr(\'selected\',\'selected\') : ' + $('#test').val());
  
window.setTimeout(function() {
  console.log('value after delay : ' + $('#test').val());
}, 1000);

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>

<select id="test" name="test" data-live-search="true" >
<button id="load" >Load data</button>

感谢任何帮助。

Answer 1

这个问题的解决方案来自github（也在那里发布了问题），来自用户

AdrienGiboire

；我也将其发布在这里希望它会有所帮助：

它发生是因为你打电话

destroy

所以正确的做法不是：

$('#test').selectpicker('destroy').selectpicker().selectpicker('val', '2');

但是

$('#test').selectpicker().selectpicker('val', '2');

并且仅在确实需要时才致电

$('#test').selectpicker('destroy');

。

该解决方案归功于 github 用户

AdrienGiboire