如何让DropDown菜单写入JavaScript Cookie

How to get DropDown menu to write to JavaScript Cookie

本文关键字：JavaScript Cookie 菜单 DropDown 更新时间：2023-09-26

我需要帮助使下拉菜单能够使用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>

使用

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]) || "";
 }
}