[英]On Select Change href and Text
當用戶從工作正常的下拉菜單中選擇時,我試圖更改價格和 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
類下的價格,因此請提供一個解決方案,如何僅顯示價格而不是選項的完整價值...
這就是你所需要的。
$(".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>
好的,對於一個簡單的解決方案,您可以編寫如下代碼:
$(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
});
});
現在您可以更改您想要的每個整數的價格。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.