记住下拉菜单中最后选择的选项

Question

I want that our website should remember the last selected option from drop down when he visit again. I'm trying it with jQuery cookies but it's not working.

Here is my select dropdown code

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

Beacuse i'm using it as filter with my search bar i read the value on keyup function my jquery i tried is

$(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();
        }
    });

As you can see I tried to use cookie to remember the selection but its not working as it takes the first option again when the page is refreshed.

Answer 1

You can use Jquery.Cookie for this case.

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

Then save dropdown value in cookie like :

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: '/'})
  });
});

Answer 2

Please refer this answer you might get some help..

 $(document).ready(function(){
        $('#search').keyup(function(){
            var value = $(this).val();
            var val = $('#city').val();
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
            document.cookie = "dropdown=" + val + expires + "; path=/";
         //   Cookies.set('dropdown',val);
            if ( value != ""){
                $('#my-search').show();
                var dropCookie = getCookie("dropdown");
                $.post('functions/search_bar.php', {value: value, val: dropCookie}, function(data){
                    $('#my-search').html(data);
                });
           }else{
               $('#my-search').hide();
           }
  });
function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];

            if (c.indexOf(name) == 0) {
                return (c.substring(name.length, c.length));
            }
        }
    }

Answer 3

I assume you are using js-cookie or similar?

This is not tested, but if the cookie is set then you could do the following:

<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 (!empty($_COOKIE['dropdown']) && $_COOKIE['dropdown'] == $rows['c_id'] ? 'selected' : ''); ?>><?php echo $rows['city_nm'];?></option>
            <?php }
        ?>
    </select>
</form>

Notice where php checks $_COOKIE['dropdown'] and outputs selected if it equals the option value on this line:

<option value= "<?php echo $rows['c_id']?>" id="optin_val" <?php echo (!empty($_COOKIE['dropdown']) && $_COOKIE['dropdown'] == $rows['c_id'] ? 'selected' : ''); ?>><?php echo $rows['city_nm'];?></option>