如何讓DropDown菜單寫入JavaScript Cookie

Question

我需要幫助使下拉菜單能夠使用cookie。在此先感謝您的幫助。我需要了解Cookie如何與下拉菜單，單選按鈕選擇列表以及如何讓它們顯示結果。這是第一頁和第二頁的JavaScript和HTML。如果使用HTML5 LocalStorage有更簡單的方法，請解釋一下。我試過本地存儲，它不適用於IE或Opera舊版瀏覽器。所以，而不是回退代碼，我只是用JS Cookies。

<script type="text/javascript"> 

function getCookie(name){var re=new RegExp(name+"=([^;]+)");var  value=re.exec(document.cookie);return(value!=null)?unescape(value[1]):null;} 

var today=new Date();var expiry=new Date(today.getTime()+30*24*3600*1000);var expired=new Date(today.getTime()-24*3600*1000); 
var cusineChoice = document.getElementByName("CAT_Custom_307514"); 
function setCookie(name,value){document.cookie=name+"="+escape(value)+"; path=/;  expires="+expiry.toGMTString();} 

function deleteCookie(name){document.cookie=name+"=null; path=/; expires="+expired.toGMTString();} 
function storeValues(form) 
{setCookie("FullAddress",form.FullAddress.value);setCookie("Postcode_18870",form.Postcode_18870.value);setCookie("field3",form.field3.value);setCookie("field4",form.field4.value);setCookie("CAT_Custom_307514",form.CAT_Custom_307514.options[form.CAT_Custom_307514.selectedIndex].value);return true;} 
</script> 

<form name="catcustomcontentform85290" method="post" onSubmit="return checkWholeForm85290(this)&& storeValues(this);" action="/Default.aspx?CCID=18870&amp;FID=112543&amp;ExcludeBoolFalse=True&amp;ID=/chowsquad-results"> 


    <div class="input_sign_home full_address_search"> 
    <label class="infieldlabel" for="FullAddress"> 
    Street Address, City, State 
    <span class="req">*</span> 
    </label> 
    <br> 
<input id="FullAddress" class="cat_textbox signup_input_main" type="text"  name="FullAddress" maxlength="255"> 
</div> 



     <div class="input_sign_home zip_search1"> 

      <label for="Postcode_18870" class="infieldlabel">Zipcode*</label><br /> 
      <input type="text" maxlength="255" name="Postcode_18870" id="Postcode_18870" class="cat_textbox signup_input_main" /> 
     <div class="hidden"> 
      <label for="Distance_18870">Distance</label><br /> 
      <select name="Distance_18870" id="Distance_18870" class="cat_dropdown"> 
      <option value="5">5 miles</option> 
      <option value="10">10 miles</option> 
      <option value="20">20 miles</option> 
      <option value="50">50 miles</option> 
      <option value="100">100 miles</option> 
      </select> 
      </div> 
     </div> 

     <div class="input_sign_home cuisine_search1"> 
     <div class="input_sign_home"> 


     <label class="hidden_label" for="CAT_Custom_134967">Choose Your Chow!</label></div> 
     <div class="title_select_vendor rest_country"> 
      <select name="CAT_Custom_307514" id="CAT_Custom_307514" class="cat_dropdown selectv"> 
      <option value="">Choose Your Chow!</option> 
      <option value="*">-- All --</option> 
      <option value="American">American</option> 
      <option value="BBQ">BBQ</option> 
      <option value="Chinese">Chinese</option> 
      <option value="Deli">Deli</option> 
      <option value="Grocery Stores">Grocery Stores</option> 
      <option value="Italian">Italian</option> 
      <option value="Jamaican">Jamaican</option> 
      <option value="Japanese">Japanese</option> 
      <option value="Indian">Indian</option> 
      <option value="Mexican">Mexican</option> 
      <option value="Middle Eastern">Middle Eastern</option> 
      <option value="Pizza">Pizza</option> 
      <option value="Seafood">Seafood</option> 
      <option value="Sushi">Sushi</option> 
      <option value="Tex-Mex">Tex-Mex</option> 
      <option value="Thai">Thai</option> 
      <option value="Vegetarian">Vegetarian</option> 
      <option value="Vietnamese">Vietnamese</option> 
      <option value="----OTHER RESTAURANTS ----">----OTHER RESTAURANTS ----</option> 
      <option value="African">African</option> 
      <option value="Argentinian">Argentinian</option> 
      <option value="Austrian">Austrian</option> 
      <option value="Bagels">Bagels</option> 
      <option value="Belgian">Belgian</option> 
      <option value="Brazilian">Brazilian</option> 
      <option value="Breakfast">Breakfast</option> 
      <option value="Brunch">Brunch</option> 
      <option value="Burgers">Burgers</option> 
      <option value="Cajun and Creole">Cajun and Creole</option> 
      <option value="Californian Cuisine">Californian Cuisine</option> 
      <option value="Cambodian">Cambodian</option> 
      <option value="Caribbean">Caribbean</option> 
      <option value="Cheesesteaks">Cheesesteaks</option> 
      <option value="Costa Rican">Costa Rican</option> 
      <option value="Crepes">Crepes</option> 
      <option value="Cuban">Cuban</option> 
      <option value="Dessert">Dessert</option> 
      <option value="Dim Sum and Dumplings">Dim Sum and Dumplings</option> 
      <option value="Diner">Diner</option> 
      <option value="English">English</option> 
      <option value="Filipino">Filipino</option> 
      <option value="French">French</option> 
      <option value="German">German</option> 
      <option value="Gluten Free">Gluten Free</option> 
      <option value="Greek">Greek</option> 
      <option value="Haitian">Haitian</option> 
      <option value="Halal">Halal</option> 
      <option value="Hawaiian">Hawaiian</option> 
      <option value="Healthy">Healthy</option> 
      <option value="Hot Dogs">Hot Dogs</option> 
      <option value="Indonesian">Indonesian</option> 
      <option value="Irish">Irish</option> 
      <option value="Korean">Korean</option> 
      <option value="Kosher">Kosher</option> 
      <option value="Latin American">Latin American</option> 
      <option value="Lebanese">Lebanese</option> 
      <option value="Malaysian">Malaysian</option> 
      <option value="Mediterranean">Mediterranean</option> 
      <option value="Moroccan">Moroccan</option> 
      <option value="Noodle Shops">Noodle Shops</option> 
      <option value="Organic">Organic</option> 
      <option value="Peruvian">Peruvian</option> 
      <option value="Polish">Polish</option> 
      <option value="Portuguese">Portuguese</option> 
      <option value="Russian">Russian</option> 
      <option value="Salads">Salads</option> 
      <option value="Sandwiches and Wraps">Sandwiches and Wraps</option> 
      <option value="Scandinavian">Scandinavian</option> 
      <option value="Smoothies and Shakes">Smoothies and Shakes</option> 
      <option value="Soups">Soups</option> 
      <option value="Southern and Soul">Southern and Soul</option> 
      <option value="Spanish and Tapas">Spanish and Tapas</option> 
      <option value="Sri Lankan">Sri Lankan</option> 
      <option value="Steakhouse">Steakhouse</option> 
      <option value="Taiwanese">Taiwanese</option> 
      <option value="Turkish">Turkish</option> 
      <option value="Vegan">Vegan</option> 
      <option value="Venezuelan">Venezuelan</option> 
      <option value="Wings">Wings</option> 
      </select> 


      </div> 
     </div> 
     <div class="search_btn_1"> 
     <input id="find_resta_btn" class="cat_button search_rest_1" type="image" src="/images/search_restaurant_home_off.png" value="Find Your Favorite Restaurant!" /> 
     </div> 
     <div class="edge_iFrame_rest_btn"> 
     <iframe class="animate" width="650" height="118" scrolling="no" frameborder="0" src="http://www.chowsquad.com/animate/ChowSquad_search_ani/index.html" allowtransparency="true"></iframe> 
     </div> 
     <div class="advanced_search_link"> 
     <a href="/advanced-search">Advanced Search</a></div> 
    </form> 

以下是相應頁面上的代碼。

<script type="text/javascript">  // Original JavaScript code by Chirp Internet:  www.chirp.com.au // Please acknowledge use of this code by including this header. 

function getCookie(name) { var re = new RegExp(name + "=([^;]+)"); var value = re.exec(document.cookie); return (value != null) ? unescape(value[1]) : null; } </script> 
<p><span class="count_no"> </span> restaurants serving <span id="street_address">  <script type="text/javascript"> document.write(getCookie("FullAddress")); </script> </span> <span id="zipContainer"><script type="text/javascript"> document.write(getCookie("Postcode_18870")); </script> </span><span><script type="text/javascript"> document.write(getCookie("CAT_Custom_307514")); </script></span></p> 

Answer 1

使用

window.onload=function() { 
var spanId=["street_address","zip_container"]; 
var field=["FullAddress","...."]; 
for (var i=0;i<field.length;i++) { 
    document.getElementById(spanId[i]).innerHTML=getCookie(field[i]) || ""; 
} 
}