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

【问题标题】：How to get a different link dynamically for each option tag value?如何为每个选项标签值动态获取不同的链接？
【发布时间】：2013-08-11 21:17:41
【问题描述】：

我正在创建一个表单，客户可以通过该表单购买在线服务。
该表单包含一个带有“选择”和“选项”标签的下拉列表。
创建下拉列表以选择计费周期（6 个月、1 年、2 年、3 年）
我想根据选择的计费周期将用户发送到不同的地址。

例如：

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

我想为每个结算周期的“立即订购”按钮动态更改 href 属性的值。
怎么做？

【问题讨论】：

标签： html tags html-select

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

感谢 Malcolm，此代码运行良好，但问题是，我在同一页面中有 3 个表单用于三种不同的产品，因此此代码仅适用于第 1 个表单。请提出一些合适的答案。
@Andi 我已经更新了我的答案以包含 3 个表格，希望对您有所帮助。