javascript - 记住下拉列表中最后选择的选项

Question

我希望我们的网站在他再次访问时应该记住下拉列表中最后选择的选项。我正在尝试使用 jQuery cookie，但它不起作用。

这是我的选择下拉代码

<form action="results.php" method="POST" enctype="multipart/form-data" id="form">
                <input id="search" type="text" name="search" placeholder="Search.." autocomplete="off">
                <select name="city" id="city">
                    <?php 
                        $sql="SELECT * FROM tcity";
                        $connect= mysqli_query($conn, $sql) or die ("Failed To Connect.");
                        while($rows= mysqli_fetch_array($connect, MYSQLI_ASSOC)){ ?>
                            <option value= "<?php echo $rows['c_id']?>" id="optin_val"><?php echo $rows['city_nm'];?></option>
                        <?php }
                    ?>
                </select>
            </form>

因为我将它用作搜索栏的过滤器，所以我读取了我尝试过的 jquery 的 keyup 函数的值

$(document).ready(function(){
    $('#search').keyup(function(){
        var value = $(this).val();
        var val = $('#city').val();
        Cookies.set('dropdown',val);
        if ( value != ""){
            $('#my-search').show();
            var dropCookie = Cookies.get('dropdown');
            $.post('functions/search_bar.php', {value: value, val: dropCookie}, function(data){
                $('#my-search').html(data);
            });
        }else{
            $('#my-search').hide();
        }
    });

如您所见，我尝试使用 cookie 来记住选择，但它不起作用，因为刷新页面时它会再次采用第一个选项。

Answer 1

对于这种情况，您可以使用Jquery.Cookie。

https://github.com/carhartl/jquery-cookie

然后将下拉值保存在 cookie 中，如下所示:

jQuery(document).ready(function(){
  var selectedVal = jQuery.cookie("selected-val");
  if (selectedVal) {
    jQuery("#city").val(selectedVal);
  }
  jQuery("#city").on("change", function(){
    var selection = jQuery(this).val();
    jQuery.cookie("selected-val", selection, {expires: 365, path: '/'})
  });
});