javascript - 在选择更改 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 类下的价格，因此请提供一个解决方案，如何仅显示价格而不是选项的完整值(value)。 .

Answer 1

这就是您所需要的。

$(".price").children("strong").text("3.00");//更改值 2.00

$("span").text("每周");//更改范围内的文本

您可以使用 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>