javascript - 需要选择的下拉菜单

Question

我正在尝试解决这个问题，但我需要一些帮助。一个带有添加到购物车按钮的下拉菜单，如果不选择任何选项就不会提交，我想要的是一个弹出窗口，提示从每个下拉选项中选择一个(必需)。这就是我想要做的http://ccaples.com/index.php/basic-scripts/examples-i/dropdown-menus-that-require-selection ，问题是如何在我的代码中实现这一点，非常感谢。

<SCRIPT TYPE="text/javascript">
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function Dollar (val) {  // force to valid dollar amount
var str,pos,rnd=0;
  if (val < .995) rnd = 1;  // for old Netscape browsers
  str = escape (val*1.0 + 0.005001 + rnd);  // float, round, escape
  pos = str.indexOf (".");
  if (pos > 0) str = str.substring (rnd, pos + 3);
  return str;
}

function ReadForm (obj1) { // process un-named selects
var i,j,amt,des,obj,pos,tok,val;
var ary = new Array ();
  amt = obj1.baseamt.value*1.0;       // base amount
  des = obj1.basedes.value;           // base description
  for (i=0; i<obj1.length; i++) {     // run entire form
    obj = obj1.elements[i];           // a form element
    if (obj.type == "select-one" &&   // just get selects
        obj.name == "") {             // must be un-named
      pos = obj.selectedIndex;        // which option selected
      val = obj.options[pos].value;   // selected value
      ary = val.split (" ");          // break apart
      for (j=0; j<ary.length; j++) {  // look at all items
// first we do single character tokens...
        if (ary[j].length < 2) continue;
        tok = ary[j].substring (0,1); // first character
        val = ary[j].substring (1);   // get data
        if (tok == "@") amt = val * 1.0;
        if (tok == "+") amt = amt + val*1.0;
        if (tok == "%") amt = amt + (amt * val/100.0);
        if (tok == "#") {             // record item number
          if (obj1.item_number) obj1.item_number.value = val;
          ary[j] = "";                // zap this array element
        }
// Now we do 3-character tokens...
        if (ary[j].length < 4) continue;
        tok = ary[j].substring (0,3); // first 3 chars
        val = ary[j].substring (3);   // get data
        if (tok == "s1=") {           // value for shipping
          if (obj1.shipping)  obj1.shipping.value  = val;
          ary[j] = "";                // clear it out
        }
        if (tok == "s2=") {           // value for shipping2
          if (obj1.shipping2) obj1.shipping2.value = val;
          ary[j] = "";                // clear it out
        }
      }
      val = ary.join (" ");           // rebuild val with what's left
      if (des.length == 0) des = val; // 1st storage?
      else des = des + ", " + val;    // nope, accumulate value
    }
  }
  obj1.item_name.value = des;
  obj1.amount.value = Dollar (amt);
  if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}

</SCRIPT>

<FORM id=viewcart name=viewcart action=https://www.paypal.com/cgi-bin/webscr 
method=post>
          </FORM>
          <FORM onSubmit="this.target = 'paypal';&#10;     ReadForm (this.form);" 
action=https://www.paypal.com/cgi-bin/webscr method=post>
            <P> 
              <INPUT type=hidden value=_cart name=cmd>
              <INPUT type=hidden value=1 name=add>
              <INPUT type=hidden value=my@email.com name=business>    
              <INPUT type=hidden name=item_name>
              <INPUT type=hidden name=item_number>
              <INPUT type=hidden name=amount>
              <INPUT type=hidden value=USD name=currency_code>    
              <INPUT type=hidden value=USD name=lc>   
              <INPUT type=hidden value=00 name=shipping>
              <INPUT type=hidden value=00.00 name=baseamt>
              <INPUT type=hidden VALUE="itemname" name=basedes>     
              <INPUT TYPE="hidden" NAME="on0" VALUE="Details">        
              <INPUT TYPE="hidden" NAME="os0" VALUE="moredetails" MAXLENGTH="800">   
            <BR>
            <BR>
            </P>
            <TABLE WIDTH="400px" BORDER="0" CELLPADDING="0" CELLSPACING="0" align="right">
              <TR> 
                <TD ALIGN="left">
                <p class="heading">&nbsp;</p>
                <p class="main">&nbsp;dropdown1</p>
                  <p class="heading">&nbsp;</p>
                </TD>
                <TD> 
                  <SELECT STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">         
                     <OPTION selected>Please select </OPTION>
                    <OPTION VALUE="option1 +125.00">option1</OPTION>
                    <OPTION VALUE="option2 +90.00">option2</OPTION>
                    <OPTION VALUE="option3 +40.00">option3</OPTION>
                  </SELECT>
                </TD>
              </TR>
              <TR> 
                <TD ALIGN="left">
                <p class="heading">&nbsp;</p>
                <p class="main">&nbsp;dropdown2</p>
                <p class="heading">&nbsp;</p> 
                </TD>
                <TD> 
                  <SELECT STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
                    <OPTION selected>Please select </OPTION>
                    <OPTION VALUE="option1 +55.00">option1</OPTION>
                    <OPTION VALUE="option2 +99.00">option2</OPTION>
                    <OPTION VALUE="option3 +44.00">option3</OPTION>
                  </SELECT>
                </TD>
              </TR>  
              <tr>
               <TR> 
                <TD ALIGN="left">
                <p class="main">&nbsp;</p>
                <p class="main">&nbsp;Price</p>
                <p class="main">&nbsp;</p>
                </TD>
                <TD ALIGN="left"> 
                  <INPUT class=nbor size=8 value=00.00 name=tot>
                </TD>
              </TR>
              <TD align="left">
          <label for="submit"></label>
          <TD align="left">
           <input type="image" src="/addtocart2.png" name="submit" id="submit" value="submit" >
          </div>
        </div></td>
      </tr>
</table>
    </table>
  </form>
  </TABLE>
 </FORM>
</div>  

Answer 1

您只需添加一个表单验证函数并为元素提供一些 ID，以便您的验证函数知道要验证什么。

首先，在你的<script>下添加这个函数标签。

function validate_first() {
        var msg1 = "Please select from first dropdown\n";
        var msg2 = "Please select from second dropdown";

        var first = document.getElementById('select1').value;
        var second = document.getElementById('select2').value;
        if(first=="" || second=="") {
            alert(((first == "") ? msg1 : "") + ((second == "") ? msg2 : ""));
            return false;
        }

        return true;
}

然后更改onsubmit表单定义中的值如下:

<FORM onSubmit="this.target = 'paypal';&#10;return validate_first();" action=https://www.paypal.com/cgi-bin/webscr method=post>

最后，为下拉菜单提供一些 ID，并为“请选择”选项添加实际值。

对于第一个下拉列表:

        <SELECT id="select1" STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
            <OPTION value="" selected>Please select </OPTION>
            <OPTION VALUE="option1 +125.00">option1</OPTION>
            <OPTION VALUE="option2 +90.00">option2</OPTION>
            <OPTION VALUE="option3 +40.00">option3</OPTION>
        </SELECT>

第二个:

        <SELECT id="select2" STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
            <OPTION value="" selected>Please select </OPTION>
            <OPTION VALUE="option1 +55.00">option1</OPTION>
            <OPTION VALUE="option2 +99.00">option2</OPTION>
            <OPTION VALUE="option3 +44.00">option3</OPTION>
        </SELECT>

就是这样。