在选择更改href和文本

Question

我想改变价格和href当用户从下拉菜单中选择工作正常。

现在我想更改页面某处的文本。这里需要

更改文字

<div class="price"> 
    <strong id="OrderLinkOne">2.00</strong> 
    <span>per month</span> 
</div> 

我也使用PHP功能，使其下面更加动态的功能

$product_id1  = 5; 
$product_id2  = 6; 
$product_id3  = 7; 
$product_id4  = 8; 
$tenure    = 12; 

function SelectValue($price, $pid, $billingcycle){ 
    $link ="http://project.dev/cart.php?a=add&pid=".$pid."&billingcycle="; // LIVE 

    if($billingcycle == "1" ){ 
     echo '<option value="'.$link.'monthly">1 Month at $'.$price.'/month</option>'; 
    } 

    if($billingcycle == "3" ){ 
     echo '<option value="'.$link.'quarterly">3 Months at $'.$price.'/month</option>'; 
    } 

    if($billingcycle == "6" ){ 
     echo '<option value="'.$link.'semiannually">6 Months at $'.$price.'/month</option>'; 
    } 

    if($billingcycle == "12" ){ 
     echo '<option value="'.$link.'annually">12 Months at $'.$price.'/month</option>'; 
    } 

    if($billingcycle == "24" ){ 
     echo '<option value="'.$link.'biennially">24 Months at $'.$price.'/month</option>'; 
    } 

    if($billingcycle == "36" ){ 
     echo '<option selected="selected" value="'.$link.'triennially">36 Months at $'.$price.'/month</option>'; 
    } 

} 

function SelectPrice($HTMLID, $pid, $billingcycle){ 
    $link ="http://project.dev/cart.php?a=add&pid=".$pid."&billingcycle="; // LIVE 

    if($billingcycle == "1" ){ 
     echo '<a id="'.$HTMLID.'" href="'.$link.'monthly">Buy Now</a>'; 
    } 

    if($billingcycle == "3" ){ 
     echo '<a id="'.$HTMLID.'" href="'.$link.'quarterly">Buy Now</a>'; 
    } 

    if($billingcycle == "6" ){ 
     echo '<a id="'.$HTMLID.'" href="'.$link.'semiannually">Buy Now</a>'; 
    } 

    if($billingcycle == "12" ){ 
     echo '<a id="'.$HTMLID.'" href="'.$link.'annually">Buy Now</a>'; 
    } 

    if($billingcycle == "24" ){ 
     echo '<a id="'.$HTMLID.'" href="'.$link.'biennially">Buy Now</a>'; 
    } 

    if($billingcycle == "36" ){ 
     echo '<a id="'.$HTMLID.'" href="'.$link.'triennially">Buy Now</a>'; 
    } 
} 

我的JS：

$(document).ready(function(){ 
    $("#planOne").change(function() { 
    console.log(this.value); 
    $("#OrderLinkOne").attr('href', this.value); 
    }); 
}); 

HTML

<div class="select-tenure"> 
    <select id="planOne"> 
     <?php echo SelectValue("2.08", $product_id1, 12);?> 
     <?php echo SelectValue("2.00", $product_id1, 24);?> 
     <?php echo SelectValue("2.00", $product_id1, 36);?> 
    </select> 
</div> 

<div class="link"> 
    <?php echo SelectPrice("OrderLinkOne", $product_id1, 36);?> 
</div> 

当我从下拉菜单中更改链接的工作呢罚款，但我想改变只有价格下.price类，请提供一个解决方案是如何显示的，而不是一个选项的完整价值只有价格...

Answer 1

这就是你需要的。

$(".price").children("strong").text("3.00"); //change the value 2.00

$("span").text("per week"); // change the text within the span

您可以使用if或switch改变基于用户选择的值。

$(document).ready(function(){ 
 
    $("#planOne").change(function() { 
 
    console.log(this.value); 
 
    $("#OrderLinkOne").attr('href', this.value); 
 
    $(".price").children("strong").text("3.00"); 
 
    $("span").text("per week"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="price"> 
 
    <strong>2.00</strong> 
 
    <span>per month</span> 
 
</div> 
 

 
<select id="planOne"> 
 
    <option value="google.com">Google</option> 
 
    <option value="microsoft.com">Microsoft</option> 
 
    <option value="yahoo.com">Yahoo</option> 
 
</select> 
 
<a id="OrderLinkOne" href="google.com">Link</a>

Answer 2

好了一个简单的解决方案，您可以编写代码：

$(document).ready(function(){ 
    $("#planOne").change(function() { 
    console.log(this.value); 
    $("#OrderLinkOne").attr('href', this.value); 
    $("#PriceOne").html('1000'); // you can turn this interger in what you want 
    }); 
}); 

现在你可以改变你的价格，你希望每一个整数。