无法将引导选择与 Jquery 追加一起用于动态下拉答案

【问题标题】：Unable to use bootstrap-select with Jquery append for Dynamic Drop down无法将引导选择与 Jquery 追加一起用于动态下拉
【发布时间】：2023-03-10 20:32:01
【问题描述】：

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

这是我的完整代码

<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>

我被困在这个问题上。请让我知道我在这方面缺少什么。

提前致谢

【问题讨论】：

标签： javascript jquery html bootstrap-4 bootstrap-select

【解决方案1】：

追加刷新选择框后添加一行

 $('#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>

【讨论】：

谢谢，您节省了我的时间。这个选择引导程序让我抓狂。
@DevelopmentFlazHost 很乐意为您提供帮助。