Question

在以下代码段中，我希望根据用户选择的样式更改价格。

因此对于款式1，价格是：1 $，2 $和3 $。对于款式2，价格为：4美元，5美元和6美元。而对于款式3，价格是：7美元，8美元和9美元。

如何根据选择的样式修改该代码以使其更改价格？

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="business" value="testtest@hotmail.com">
  <input type="hidden" name="lc" value="BM">
  <input type="hidden" name="button_subtype" value="services">
  <input type="hidden" name="no_note" value="0">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
  <table>
    <tr>
      <td>
        <input type="hidden" name="on1" value="Which style?">Which style?</td>
    </tr>
    <tr>
      <td>
        <select name="os1">
          <option value="Style 1">Style 1</option>
          <option value="Style 2">Style 2</option>
          <option value="Style 2">Style 2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="hidden" name="on0" value="How many?">How many?</td>
    </tr>
    <tr>
      <td>
        <select name="os0">
          <option value="10 -">10 - $1.00 USD</option>
          <option value="100 -">100 - $2.00 USD</option>
          <option value="1000 -">1000 - $3.00 USD</option>
        </select>
      </td>
    </tr>
  </table>
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="option_select0" value="10 -">
  <input type="hidden" name="option_amount0" value="1.00">
  <input type="hidden" name="option_select1" value="100 -">
  <input type="hidden" name="option_amount1" value="2.00">
  <input type="hidden" name="option_select2" value="1000 -">
  <input type="hidden" name="option_amount2" value="3.00">
  <input type="hidden" name="option_index" value="0">
  <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
  <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Answer 1

您可以在jQuery中挂钩Change事件并相应地更新值。

下面的脚本会更新隐藏的字段值并更改第二个下拉列表的文本。

您需要在网站的<head>部分或结束正文标记</body>之前添加以下行和脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

脚本：

   $('select[name=os1]').change(function() {
 var style = $( this ).val();
  var price1, price2, price3;
  
  if(style == "Style 1"){
    price1 = "1.00";
    price2 = "2.00";
    price3 = "3.00";
  } else if(style == "Style 2"){
    price1 = "4.00";
    price2 = "5.00";
    price3 = "6.00";
  } else if (style == "Style 3"){
    price1 = "7.00";
    price2 = "8.00";
    price3 = "9.00";
  }
  
  $('select[name=os0] option[value=10]').text("10 - $" + price1 + " USD");
  $('select[name=os0] option[value=100]').text("100 - $" + price2 + " USD");
  $('select[name=os0] option[value=1000]').text("1000 - $" + price3 + " USD");
  $("input[name=option_amount0]").val(price1);
  $("input[name=option_amount1]").val(price2);
  $("input[name=option_amount2]").val(price3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
      <input type="hidden" name="cmd" value="_xclick">
      <input type="hidden" name="business" value="testtest@hotmail.com">
      <input type="hidden" name="lc" value="BM">
      <input type="hidden" name="button_subtype" value="services">
      <input type="hidden" name="no_note" value="0">
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
      <table>
        <tr>
          <td>
            <input type="hidden" name="on1" value="Which style?">Which style?</td>
        </tr>
        <tr>
          <td>
            <select name="os1">
              <option value="Style 1">Style 1</option>
              <option value="Style 2">Style 2</option>
              <option value="Style 3">Style 3</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <input type="hidden" name="on0" value="How many?">How many?</td>
        </tr>
        <tr>
          <td>
            <select name="os0">
              <option value="10">10 - $1.00 USD</option>
              <option value="100">100 - $2.00 USD</option>
              <option value="1000">1000 - $3.00 USD</option>
            </select>
          </td>
        </tr>
      </table>
  <label id="output"></label>
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="option_select0" value="10">
      <input type="hidden" name="option_amount0" value="1.00">
      <input type="hidden" name="option_select1" value="100">
      <input type="hidden" name="option_amount1" value="2.00">
      <input type="hidden" name="option_select2" value="1000">
      <input type="hidden" name="option_amount2" value="3.00">
      <input type="hidden" name="option_index" value="0">
      <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

注意 - 我将os0的选项值从100 -更改为100，依此类推。

Paypal立即购买按钮 - 动态价格下拉

1 个答案: