如何在bootstrap 4中更改选择选项programmaticaly?

<li class="nav-item">
    <div class="form-group">
        <select class="custom-select custom-select-lg mb-3 text-white" id="materialType" onchange="typeChange('materialType')" style="background-color: transparent;border: none">
          <option value="Material Type">Material Type</option>
          <option value="All">All</option>
          <option value="Mud">Mud</option>
          <option value="Cloth">Cloth</option>
          <option value="Thread">Thread</option>
          <option value="Jute">Jute</option>
          <option value="Cotton">Cotton</option>
          <option value="Can">Can</option>
          <option value="Bamboo">Bamboo</option>
        </select>
    </div>
</li>

当我刷新页面时 typeChange 函数返回到第一个选项,即 Material Type 。刷新页面后如何更改此内容?

类型更改功能

function typeChange(type)
    {
        //alert('type change'); 
        var typeValue = document.getElementById(type).value;
        $.ajax({
            url: 'typeChange.php',
            type: 'POST',
            data:
            {
                type: type,
                typeValue: typeValue
            },
            success: function(data)
            {
                alert(data);
                window.location.href = 'test.php?id=2';
                //$(type).select(typeValue);
            },
            error: function(data)
            {
                //alert('signup error');
                console.log(data);
            }            
        });
    }

我想这样做: $(type).setValue(typeValue); 编辑1

我试过了

window.location.href = 'test.php?id=2';
$(type).val(typeValue);

但似乎不起作用。

编辑2

我也试过了

window.location.href = 'test.php?id=2';document.getElementById(type).value = typeValue;

但这也行不通。

编辑3

我还在会话中使用了select选项值 $_SESSION['materialType']

编辑4
我的选择选项在导航栏中

image.png