記住從下拉菜單中選擇的最後一個選項

Question

我希望我們的網站在他再次訪問時記得從下拉菜單中選擇的最後一個選項。我試着用jQuery的cookies，但它不工作。

這是我的選擇下拉代碼

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

怎麼一回事，因爲我使用它作爲我的搜索欄過濾我讀KEYUP功能我的jQuery我想是

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

我假設你正在使用js-cookie或類似的？

這不是測試，但如果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 (!empty($_COOKIE['dropdown']) && $_COOKIE['dropdown'] == $rows['c_id'] ? 'selected' : ''); ?>><?php echo $rows['city_nm'];?></option> 
      <?php } 
     ?> 
    </select> 
</form> 

通知PHP在哪裏檢查$_COOKIE['dropdown']和輸出selected如果它等於在這條線的選項值：

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

Answer 2

請參考這個答案你可能會得到一些幫助..

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

對於這種情況，您可以使用Jquery.Cookie。

https://github.com/carhartl/jquery-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: '/'}) 
    }); 
});