javascript - JQUERY onchange() 获取选定的选项并传递给要插入到 Mysql 数据库中的变量

Question

我试图从下拉菜单中获取选定的值，根据选择创建一个值作为变量，并将该变量的值插入到 MYSQL 表中。

这是我当前的代码:

HTML/PHP

<select id="customer_country" name="customer_country"
class="validate[required] input_styling target"
style="background: #FFFFFF;">
                <option value="">Please Select a Country</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Åland Islands">Åland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
                <option value="American Samoa">American Samoa</option>
                <option value="Andorra" selected>Andorra</option>
...

</select>

<?PHP 

$shipping = */ post javascript variable here */

$sql = mysql_query('UPDATE orders
SET shipping=$shipping
WHERE order_id='$r[order_id']');

?>

<div class="overlay-bg">
      <div class="overlay-content">
          <p>You have selected a country of residence outside of the United Kingdom.</p>
          <p>Please note we only accept credit card payments from UK customers.</p>
          <p>If you are a customer from outside the UK, please click the
          Paypal icon to be taken through to Paypal checkout to complete your order.</p>
          <td width="185" align="center" valign="middle">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_xclick" />
            <input type="hidden" name="business" value="" />
            <input type="hidden" name="item_name" value="" />
            <input type="hidden" name="return" value="" />
            <input type="hidden" name="currency_code" value="GBP" />
            <input type="hidden" name="image_url" value="" />
            <input type="hidden" name="item_name" value="<?=$r['order_title_1']?>" />
            <input type="hidden" name="item_name" value="<?=$r['order_title_2']?>" />
            <input type="hidden" name="item_name" value="<?=$r['order_title_3']?>" />
            <input type="hidden" name="shipping" value="<?=$shipping?>" />
            <input type="hidden" name="amount" value="<?=$r['order_total']?>" />
            <input type="image" src=""
                   name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
            </form>
          <p>However, if you are a UK customer and simply made an error,
          please click below to return to the checkout page.</p>
          <p>Thank you</p>
          <button class="close-btn">Close</button>
        </div>
        </div>

JQUERY

$(document).ready(function(){
    // show popup when selecting a country from the drop-down
    $( ".target" ).change(function() {
     if($(this).val() != "United Kingdom") {
        var docHeight = $(document).height();
        var scrollTop = $(window).scrollTop(); 
        $('.overlay-bg').show().css({'height' : docHeight}); 
        $('.overlay-content').css({'top': scrollTop+20+'px'});
     }
    });

代码将执行以下操作:

• 获取所选选项的值
• 如果选项不是英国 - 将应用以下两个条件之一

条件一

如果选择的选项是阿尔巴尼亚、 Algolia 、阿富汗 - 将创建一个值为 £15.00 的变量

条件二

如果选择的选项是美属萨摩亚、奥兰群岛 - 将创建一个值为 £10.00 的变量

• 然后根据给定的 order_id 使用 UPDATE 语句将该值输入到 MYSQL 表中。

编辑

是否可以回显 javascript 值然后由服务器存储为 PHP 变量？

如有任何帮助，我们将不胜感激。

Answer 1

将价格存储在数据属性中，根据价格可以得到柜台的钱

HTML

<select id="customer_country" name="customer_country" class="validate[required] input_styling target" style="background: #FFFFFF;">
    <option value="" data-price="0">Please Select a Country</option>
    <option value="Afghanistan" data-price="15">Afghanistan</option>
    <option value="Åland Islands" data-price="10">Åland Islands</option>
    <option value="Albania" data-price="15">Albania</option>
    <option value="Algeria" data-price="15">Algeria</option>
    <option value="American Samoa" data-price="10">American Samoa</option>
    <option value="Andorra" data-price="0" selected>Andorra</option>
</select>

JS

var money = 0;
$(".target").change(function () {
  // this.value; to get the selected country value
    var optionSelected = $("option:selected", this);
    money = optionSelected.data("price");
    alert(money);
});

DEMO