代码之家 › 专栏 › 技术社区 › user9719859

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

bootstrap-4 jquery javascript

user9719859 · 技术社区 · 6 年前

<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

2 回复 | 直到 6 年前

charlietfl 6 年前

您的流程思维需要调整。无法在 $.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>

Arturokin12 6 年前

只需对jquery执行以下操作:

$('#selectid').val(variable);
$('#selectid').trigger('change');

当然,我放在那里的“变量”是select中的值=“”,必须等于一个选项值。