javascript - 如何在 bootstrap 4 中以编程方式更改选择选项？

Question

<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

我也用过SESSION中的select选项值$_SESSION['materialType']

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

image.png

Answer 1

您的流程思维需要调整。您不能在 $.ajax 中设置值，因为您正在重新加载页面。浏览器不会为下一次加载保存当前页面加载的任何状态

这意味着您需要在下一次页面加载时设置该值

假设主页是一个 php 文件，您需要如下内容:

<?php
   session_start();
   $type = isset($_SESSION['materialType']) ? $_SESSION['materialType'] :'';// default to empty string or whatever value you want
?>

<script>
  $(function(){
    $('#materialType').val('<?php echo $type ?>');
  })
</script>