Question

我正在创建一个表单，客户可以通过该表单购买在线服务该表单包含一个带有“select”和“amp”的下拉列表。 'option'标签。
创建下拉列表以选择结算周期（6个月，1年，2年，3年）
我想将用户发送到不同的地址，具体取决于结算周期的选择。

例如：

如果选择了6个月并点击“立即订购”，则客户将被发送到链接1.
如果选择了1年且点击了“立即订购”，则客户将被发送到链接2.
如果选择了2年且点击“立即订购”，则客户将被发送到链接3.

我想为每个结算周期的ORDER NOW按钮动态更改href属性的值怎么做？

Answer 1

尝试以下脚本。



<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body>

<select id="selProduct">
    <option value=1>6 mths</option>
    <option value=2>1 yr</option>
</select>

<input type=button value="Order Now" id="btnOrder" />

<script type="text/javascript">

 $(document).ready(function(){

    $('#btnOrder').click(function(){
        if( $('#selProduct').val() == '1')
            window.location='http://msn.com';
        if( $('#selProduct').val() == '2')
            window.location='http://yahoo.com';
    });
 });


</script>

</body>    
   </html>

Answer 2

正如您在下面的评论中提到的那样，您有3个表格，抱歉我没有意识到这一点，因为您的问题没有说明有多个，所以我更新了我的答案，见下文。

的Javascript

<script type="text/javascript">
    var order = function() {
       //Check which option was selected for product_1 and re-direct
       if (document.getElementById("product_1").value == "6 months"){ document.getElementById("product_1").value = "Select"; window.location.replace('product1_6months.php','_blank'); }
       if (document.getElementById("product_1").value == "1 year"){ document.getElementById("product_1").value = "Select"; window.location.replace('product1_1year','_blank'); }
       if (document.getElementById("product_1").value == "2 year"){ document.getElementById("product_1").value = "Select"; window.location.replace('product1_2year','_blank'); }
       if (document.getElementById("product_1").value == "3 year"){ document.getElementById("product_1").value = "Select"; window.location.replace('product1_3year','_blank'); }

       //Check which option was selected for product_2 and re-direct
       if (document.getElementById("product_2").value == "6 months"){ document.getElementById("product_2").value = "Select"; window.location.replace('product2_6months.php','_blank'); }
       if (document.getElementById("product_2").value == "1 year"){ document.getElementById("product_2").value = "Select"; window.location.replace('product2_1year.php','_blank'); }
       if (document.getElementById("product_2").value == "2 year"){ document.getElementById("product_2").value = "Select"; window.location.replace('product2_2year.php','_blank'); }
       if (document.getElementById("product_2").value == "3 year"){ document.getElementById("product_2").value = "Select"; window.location.replace('product2_3year.php','_blank'); }

       //Check which option was selected for product_3 and re-direct
       if (document.getElementById("product_3").value == "6 months"){ document.getElementById("product_3").value = "Select"; window.location.replace('product3_6months.php','_blank'); }
       if (document.getElementById("product_3").value == "1 year"){ document.getElementById("product_3").value = "Select"; window.location.replace('product3_1year.php','_blank'); }
       if (document.getElementById("product_3").value == "2 year"){ document.getElementById("product_3").value = "Select"; window.location.replace('product3_2year.php','_blank'); }
       if (document.getElementById("product_3").value == "3 year"){ document.getElementById("product_3").value = "Select"; window.location.replace('product3_3year.php','_blank'); }
    }
</script>

HTML

<form action="" method="post" name="product_1">
<select id="product_1">
    <option value="Select" selected>Select</option>
    <option value="6 months">6 months</option>
    <option value="1 year">1 year</option>
    <option value="2 year">2 year</option>
    <option value="3 year">3 year</option>
</select>
</form>

<form action="" method="post" name="producs_2">
<select id="product_2">
    <option value="Select" selected>Select</option>
    <option value="6 months">6 months</option>
    <option value="1 year">1 year</option>
    <option value="2 year">2 year</option>
    <option value="3 year">3 year</option>
</select>
</form>

<form action="" method="post" name="product_3">
<select id="product_3">
    <option value="Select" selected>Select</option>
    <option value="6 months">6 months</option>
    <option value="1 year">1 year</option>
    <option value="2 year">2 year</option>
    <option value="3 year">3 year</option>
</select>
</form>

<input name="order" type="button" value="Order Now" onClick="order()">

Example

如何为每个选项标签值动态获取不同的链接？

2 个答案: