如何使用 Bootstrap 4 和 jQuery 实时更改 Select 的标题属性？

Question

如何使用 Bootstrap 4 和 jQuery 实时更改 Select 的标题属性？请参阅此代码：

<div class="col-md-3">
    <div class="form-group disabled">
        <select class="selectpicker" data-style="select-with-transition" data-toggle="tooltip" data-placement="top" title="test" id="my-select">
            <option></option>
        </select>
    </div>
</div>

我尝试使用以下方式更改标题：

$(document).ready(function() {
    $('#my-select').prop('title', 'new content');
    $('[data-toggle="tooltip"]').tooltip();
});

或：

$(document).ready(function() {
    $('#my-select').attr('title', 'new content');
    $('[data-toggle="tooltip"]').tooltip();
});

但是没有任何反应！如何解决？

Answer 1

$(document).ready(function() {
$('#my-select').attr('title', 'new content');
});

替换为

$(document).ready(function() {
$('#my-select').attr('title', 'new content');
$('#my-select').selectpicker('destroy').selectpicker();
});

你还需要包含这个 js

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.js" ></script>
<div class="col-md-3">
    <div class="form-group disabled">
        <select class="selectpicker" data-style="select-with-transition" title="test" id="my-select">
            <option></option>
        </select>
    </div>
</div>

Answer 2

试试 yhis:

$( "#my-select" ).attr({
  title: "new content"
});

如何使用 Bootstrap 4 和 jQuery 实时更改 Select 的标题属性？

How to change title attribute of a Select using Bootstrap 4 with jQuery in real time?

jquery

html-select

bootstrap-4