javascript - 填写下拉菜单和单选按钮选项以继续访问正确的网址

Question

我试图强制我的客户在 cart.php 上做两个选择，然后才能继续结帐。根据这些选择，客户将被重定向到正确的页面。 但它没有按照我想要的方式显示在 woocommerce 购物车页面中。

html

   To  proceed please fill this following steps.<br>
   Country:<br><select id="selectMe">
   <option value="none">Choose country</option>
   <option value="sweden">sweden</option>
   <option value="other">other</option>
   </select>
   <br><br><br>

   <div id="sweden" class="group">
   <BLOCKQUOTE><font size="4" face="Alice">Choose payment method</font><HR>
   <pre>
   <form name="jump"> 
   <input type=radio name=a value="http://facebook.com">Klarna checkout<br>
   <input type=radio name=a value="http://google.com">Paypal<br>
   <input type=radio name=a value="http://paypal.com">cash on delivery<br>

   <input type="button" value="Proceed to checkout" onClick="linkselect(this.form)">
   </form>
   </div>
   <div id="other" class="group">
   <BLOCKQUOTE><font size="4" face="Alice">Choose payment method</font><HR>
   <pre>
   <form name="jump"> 
   <input type=radio name=a value="http://paypal.com">Paypal<br>

   <input type="button" value="Proceed to checkout" onClick="linkselect(this.form)">
   </form>
   </div>

JavaScript

    $(document).ready(function () {
    $('.group').hide();
    $('#none').show();
    $('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
       })
    });

    function linkselect(what) {
    for (var i=0; i<3; i++) { 
    if (what.a[i].checked == true)
    location.href = what.a[i].value;
       }
    }

Answer 1

您需要注意的事项:

1. 除非没有其他办法，否则不要使用多种形式
2. 将所有 html 属性括在引号中。
3. 没有前置标签。设置元素的样式以适合您的 UI

看看下面的 HTML/JS

演示:Fiddle

在页面的“head”部分包含以下 jQuery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

HTML(重组)

<select id="selectMe">
  <option value="none">Choose country</option>
  <option value="sweden">sweden</option>
  <option value="other">other</option>
</select>


<div id="wrapper" class="group" style="display:none;">
  <BLOCKQUOTE><font size="4" face="Alice">Choose payment method</font></BLOCKQUOTE><HR>
  <form name="jump">

    <div class="sweden" style="display:none;">
      <input type="radio" name="a" value="http://facebook.com" />Klarna checkout<br>
      <input type="radio" name="a" value="http://google.com" />Paypal<br>
      <input type="radio" name="a" value="http://paypal.com" />cash on delivery<br>
    </div>

    <div class="other" style="display:none;">
      <input type="radio" name="a" value="http://paypal.com"/>Paypal<br>
    </div>

    <input id="checkout" type="button" value="Proceed to checkout" />

  </form>
</div>

JS

$(document).ready(function () {
    var group = $('.group');
    $('#selectMe').change(function () {
        $('form[name="jump"] :radio').prop('checked', false);
        var selected = $(this).val();
        group[selected !== 'none'? "show" : "hide"]();
        group.find('div').hide();
        $('.'+selected).show();
    });

    $('#checkout').bind('click', function() {
        var selectedVal = $('form[name="jump"] :radio:checked').val();
        if ( selectedVal ) {
            //alert (selectedVal);
            window.location.href = selectedVal;
        }
    });
});