Question

我正在完成一项任务，我必须使用通过表单输入的值编写Cookie，我无法弄清楚如何从下拉菜单中获取所选值以保存为Cookie

的Javascript

    /* this function attachs the event handler under both event models */
    function addEvent(object, evName, fnName, cap) {
        if (object.attachEvent)
            object.attachEvent("on" + evName, fnName);
        else if (object.addEventListener)
            object.addEventListener(evName, fnName, cap);
    }



    function writeCookie(cName, cValue, expDate, cPath, cDomain, cSecure) {
      if (cName && cValue != "") {
         var cString = cName + "=" + escape(cValue);
         if (expDate) 
            cString += ";expires=" + expDate.toGMTString();

         if (cPath) cString += ";path=" + cPath;
         if (cDomain) cString += ";domain=" + cDomain;
         if (cSecure) cString += ";secure";


         document.cookie = cString;
      }
    }

    function saveMailingInfo() {
      var expire = new Date();
      expire.setFullYear(expire.getFullYear() + 1);
      var allFields = document.mailingForm.elements;
      for (var i  = 0; i < allFields.length; i++) {
        if (allFields[i].type == "text") {
          writeCookie(allFields[i].id, allFields[i].value, expire);
        }
        if (allFields[i].nodename == "SELECT") {
          writeCookie(allFields[i].id, allFields[i].selectedIndex, expire);
        }
        if (allFields [i].type == "radio" || allFields[i].type == "checkbox") {
      writeCookie(allFields[i].id, allFields[i].checked, expire);
    }
      }
      alert("Registration data saved");
    }

    addEvent(window, "load", initPage, false);

    function initPage(){
      document.getElementById("sbutton").onclick = saveMailingInfo;
      document.getElementById("favoriteCake").selectedIndex = retrieveCookie("favoriteCake");
    }

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!-- DW6 -->
    <head>
    <!-- 



    -->
    <title>Cakes by Emily</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="main.css" type="text/css" />
       <script type="text/javascript" src="cakeForm.js"></script>

    </head>
    <body >
    <div class="head" id="header">
      <p><img src="cake.jpg" alt="cake picture" /><img src="logo.gif" alt="Cakes by Emily" width="400" height="125" /></p>
      <div class="links" id="navigation">
        <a href="#">Home</a>
        <a href="#">Cakes</a>
        <a href="#">Pastries</a>
        <a href="#">Pies</a>
        <a href="#">Mailing List</a>
      </div>
    </div>
    <div class="mainContent">
    <p>Enter your info to be added to our email list with reminders about getting that birthday 
    cake you want! Remember at Cakes by Emily, we aim to make every birthday the best!</p>
    <form name="mailingForm" >
     <table>
      <tr>
       <td>
      First:

       </td>
       <td> <input type="text" name="firstName"  id="firstName"><BR>
      </td>
     </tr>
      <tr>
       <td>
      Last: 
       </td>
       <td><input type="text" name="lastName" id="lastName" ><BR>
      </td>
     </tr>
      <tr>
       <td>
      E-Mail: 

       </td>
       <td><input type="text" name="email" id="email" ><BR>
      </td>
     </tr>
      <tr>
       <td>
      Birthday (mm/dd/yyyy): 

       </td>
       <td><input type="text" name="birthday" id="birthday" ><BR>
      </td>
     </tr>
      <tr>
       <td>
      Favorite Cake: 

       </td>
       <td>
        <select id="favoriteCake">
         <option value="ButterCream">Butter Cream</option>
         <option value="Chocolate">Chocolate</option>
         <option value="Vanilla">Vanilla</option>
         <option value="RedVelvet">Red Velvet</option>
       </select><BR>
      </td>
     </tr>
      <tr>
       <td>
      Frequency of Emails: 

       </td>
       <td><input type="radio" name="frequency" id="frequency1" >Email me monthly<BR>
           <input type="radio" name="frequency" id="frequency2" >Email me quarterly<BR>
           <input type="radio" name="frequency" id="frequency3" >Email me near my birthday<BR>
      </td>
     </tr>
    </table>
    <input type="submit" id="sbutton" name="sbutton"  value="Join our mailing List" />
    <input type="reset" value="Reset the form" />
    </form>
    </div>
    <div class="footer">
    </div>
    </body>
    </html>

Answer 1

要获取HTML select中所选项目的值，请使用：

var cake = document.getElementById("favoriteCake");
var cakeValue = cake.options[cake.selectedIndex].value;

我也不禁注意到，当分支只包含一个语句时，大多数if语句都在利用可选的花括号：

    if (object.attachEvent)
        object.attachEvent("on" + evName, fnName);
    else if (object.addEventListener)
        object.addEventListener(evName, fnName, cap);

以下是您不应该这样做的一个很好的例子：

    if (cPath) cString += ";path=" + cPath;

这看起来如果cPath是true，那么同一行后面的代码将被执行，但path=" + cPath;总是会被执行，因为当你省略卷曲时大括号，你告诉JavaScript运行时，当代码进入该分支时，只应执行测试后的第一个语句或else。

这是一种非常糟糕的做法，最终会导致程序出错。总是用大括号包围你的分支代码：

    if (object.attachEvent){
        object.attachEvent("on" + evName, fnName);
    } else if (object.addEventListener) {
        object.addEventListener(evName, fnName, cap);
    }

和

    if (cPath) { 
         cString += ";
         path=" + cPath;
    }

最后，使用跨浏览器事件连接功能：

/* this function attachs the event handler under both event models */
function addEvent(object, evName, fnName, cap) {
    if (object.attachEvent)
        object.attachEvent("on" + evName, fnName);
    else if (object.addEventListener)
        object.addEventListener(evName, fnName, cap);
}

您应该，不仅要包括花括号，还可以通过切换测试顺序来提高性能。由于attachEvent仅适用于IE 8及更低版本，因此您的测试确实是罕见的情况，但您每次都要测试它。如果切换序列，则很少需要运行else代码，而现在，您必须在大多数时间运行测试代码和else代码。最后，您只需要一个else，而不是else if，因为如果不支持其中一个事件模型，那么另一个是 - 您不需要测试它。

function addEvent(object, evName, fnName, cap) {
    if (object.addEventListener){
        object.addEventListener(evName, fnName, cap);
    } else {
        object.attachEvent("on" + evName, fnName);
    }          
}

Answer 2

您可以使用所选的索引值属性获取所选项目。

var cake = document.getElementById("favoriteCake");
var selectedCake = cake.options[cake.selectedIndex].value;

将其存储在cookie中的一种方法是：

document.cookie = "selected_cake="+selectedCake;

使用Javascript编写cookie（和cream）代码

2 个答案: