Sur Sélectionnez Changer href et texte

Question

J'essaie de changer le prix et href lorsque l'utilisateur sélectionne dans le menu déroulant qui fonctionne bien.

Maintenant je veux changer un texte quelque part dans la page.

du texte requis ici

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

J'utilise également une fonction PHP pour le rendre plus dynamique ci-dessous est la fonction

$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>'; 
    } 
} 

Mes 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> 

Quand je change de menu déroulant le lien est wokring bien, mais je veux changer le prix que sous .price classe donc s'il vous plaît fournir une solution comment afficher le prix seulement, au lieu de la valeur totale d'une option ...

Answer 1

C'est ce dont vous avez besoin.

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

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

Vous pouvez utiliser if ou switch pour modifier la valeur en fonction du choix de l'utilisateur.

$(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

D'accord pour une solution simple, vous pouvez écrire le code comme:

$(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 
    }); 
}); 

maintenant, vous pouvez changer votre prix dans tout entier que vous voulez.