将选项值更改为href?

时间:2019-03-10 14:32:20

标签: javascript html css

您好,我下载了一些要重新调整的html模板,并且有这样的代码形式,是否可以将“ value”选项更改为“ href”,所以当客户选择时说“ Standard Access”然后单击“立即购买”按钮重定向到贝宝,可以说吗? 这是代码:

 <div class="modal-body">
          <form method="POST" action="#">
            <div class="form-group">
              <input type="text" class="form-control" name="your-name" placeholder="Your Name">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="your-email" placeholder="Your Email">
            </div>
            <div class="form-group">
              <select id="ticket-type" name="ticket-type" class="form-control" >
                <option value="">-- Select Your Ticket Type --</option>
                <option value="standard-access">Standard Access</option>
                <option value="pro-access">Pro Access</option>
                <option value="premium-access">Premium Access</option>
              </select>
            </div>
            <div class="text-center">
              <button type="submit" class="btn">Buy Now</button>
            </div>
          </form>
        </div>

2 个答案:

答案 0 :(得分:3)

这里有一些例子。可能有可能使它变得更好,但我不知道具体情况。

$('#confirmButton').on('click', function() {
  const href = $('#redirect').val();
  window.location.href = href;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="redirect">
  <option value="" disabled selected>-- Select Your Ticket Type --</option>
  <option value="https://www.google.com">Google</option>
  <option value="https://stackoverflow.com">Stackoverflow</option>
</select>
<button type="button" id="confirmButton">Confirm</button>

答案 1 :(得分:0)

您可以在表单上添加onsubmit侦听器。

<form method="POST" action="#" onsubmit="myFunction()">...
</form>

<script>
myFunction(){
    var x = document.getElementById("ticket-type").value;
    if (x== 'standard-access') {window.location.href = "http://www.URL1.html";}
    else if (x== 'pro-access') {window.location.href = "http://www.URL2.html";}
    return false; // to prevent default submit
}
</script>