无法将 bootstrap-select 与 Jquery 附加用于动态下拉列表

Question

我正在尝试将 Bootsrap-select 与 Jquery 一起用于动态下拉值，但无法将 Jquery 附加与 Bootsrap-select 一起使用。尽管它与我的 Html 完美配合（不使用 Bootsrap-select class ）

这是我的完整代码

<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>
</head>

<body>
<h5>typeOfGlass</h5>
<select id="typeOfGlass" class="selectpicker">
  <option value="15">Standard/Annealed Glass Width</option>
    <option value="20">Tempered Glass Width</option>
</select><br>

Glass Width<br>
    <select id="glassWidth" class="selectpicker">
        <option value="19">Select type of Glass</option>
    </select>
    <script>$('#typeOfGlass').on('change', function(){
   console.log($('#typeOfGlass').val());
    $('#glassWidth').html('');
    if($('#typeOfGlass').val()==15){
        $('#glassWidth').append('<option value="19">Standard</option>');
        $('#glassWidth').append('<option value="20">Standard 2</option>');

    }else{
        $('#glassWidth').append('<option value="6">Tempered</option>');
        $('#glassWidth').append('<option value="7">Tempered 2</option>');

    }
});</script>

</body></html>

我卡在这了。请让我知道我在这里遗漏了什么。

提前致谢

Answer 1

在刷新 select 框后添加一行作为

 $('#glassWidth').selectpicker('refresh');

<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>
</head>

<body>
<h5>typeOfGlass</h5>
<select id="typeOfGlass" class="selectpicker">
  <option value="15">Standard/Annealed Glass Width</option>
    <option value="20">Tempered Glass Width</option>
</select><br>

Glass Width<br>
    <select id="glassWidth" class="selectpicker">
        <option value="19">Select type of Glass</option>
    </select>
    <script>$('#typeOfGlass').on('change', function(){
   console.log($('#typeOfGlass').val());
    $('#glassWidth').html('');
    if($('#typeOfGlass').val()==15){
        $('#glassWidth').append('<option value="19">Standard</option>');
        $('#glassWidth').append('<option value="20">Standard 2</option>');

    }else{
        $('#glassWidth').append('<option value="6">Tempered</option>');
        $('#glassWidth').append('<option value="7">Tempered 2</option>');

    }
     $('#glassWidth').selectpicker('refresh');
    
});

</script>

</body></html>

无法将 bootstrap-select 与 Jquery 附加用于动态下拉列表

Unable to use bootstrap-select with Jquery append for Dynamic Drop down

html

javascript

jquery

bootstrap-select

bootstrap-4