javascript - 如何使用 PHP/JS 计算下拉菜单的值？

Question

嗨，我一直很困惑如何做到这一点，找不到任何可以帮助我的相关教程，所以我想我会在这里提问，希望能找到帮助。

我有一个带有 2 个下拉菜单的表单，每个菜单都有一个 value 属性。我想要做的是让某人从一个下拉菜单中选择一个项目，然后从另一个下拉菜单中选择另一个项目。

一旦两个下拉列表都选择了一个项目，就会向该人显示一个总和，该总和是从下拉列表 1 和下拉列表 2 的值中累积的

这是我的代码，但一点都不正确。

<form>
echo "<select name=Postage>
  <option value='14'>1st Class</option>
  <option value='8'>2nd Class</option>
  <option value='22'>Next Day Delivery</option>
  <option value='0'>Click And Collect</option>
</select>
<br>
<select name=Type>";

$type = "SELECT * FROM $category order by id";
$item = mysql_query($type);
while ($typeitem = mysql_fetch_assoc($item)) {

echo "<option value=$typeitem[price]>$typeitem[type]</option>";

}

$totalspend = Type.value + Postage.value;

echo "
Total £$totalspend
</select>
</form>";

我知道我会收到回复说您需要通过 javascript 执行此操作，但我不知道如何将其实现到 javascript 代码中。

有什么帮助吗？

Answer 1

我不确定你的问题是否要将它添加到选择的数据库中......这需要一个简单但不同的代码。这将完成您的要求。

您不需要表单...只需要选择框。如果您注意到我将每段 html 封装在一个 echo 标记中……这会向浏览器写入一个最小化的代码。

你必须 id每个选择框如下:

HTML

echo '<select id="this_postage" name="Postage">';
        echo '<option value="14">1st Class</option>';
        echo '<option value="8">2nd Class</option>';
        echo '<option value="22">Next Day Delivery</option>';
        echo '<option value="0">Click And Collect</option>';
    echo '</select>';   

    echo '<select id="this_type" name="Type">';
        $type = "SELECT * FROM $category order by id";
        $item = mysql_query($type);
        while ($typeitem = mysql_fetch_assoc($item)) {  
            echo '<option value='.$typeitem[price].'>'.$typeitem[type].'</option>'; 
        }
    echo '</select>';

    echo '<div id="total_spend"></div>';

注意带有 id="total_spend" 的 div .

JQUERY

$(function() {  
    $( "#this_type" ).change(function(){
        var total_spend = parseInt($('#this_postage').val()) + parseInt($('#this_type').val());
        $('#total_spend').html('Total: £'+total_spend);
}); 

当用户选择 Type jQuery 将拾取更改并获取邮资和类型的值并将它们相加，然后在 <div id="total_spend">Total: £TOTAL HERE</div> 中呈现总数。

此代码将发送至数据库:

同样不需要表单标签:

HTML:

添加隐藏输入以保存处理 URL

echo '<input type="hidden" id="updateURL" value="PATH-TO-PHP-PROCESSING-FILE.PHP">';
    echo '<select id="this_postage" name="Postage">';
        echo '<option value="14">1st Class</option>';
        echo '<option value="8">2nd Class</option>';
        echo '<option value="22">Next Day Delivery</option>';
        echo '<option value="0">Click And Collect</option>';
    echo '</select>';   

    echo '<select id="this_type" name="Type">';
        $type = "SELECT * FROM $category order by id";
        $item = mysql_query($type);
        while ($typeitem = mysql_fetch_assoc($item)) {  
            echo '<option value='.$typeitem[price].'>'.$typeitem[type].'</option>'; 
        }
    echo '</select>';

    echo '<div id="total_spend"></div>';

JQUERY:

$(function() {
$( "#this_type" ).change(function(){
        var url = $('#updateURL').val();        
        var postage = parseInt($('#this_postage').val());   
        var type = parseInt($('#this_type').val());
        var total_spend = (postage + type);
        var postit = $.post( url, {
        custom_block_name:custom_block_name,
        postage:postage,
        type:type
        });     
        postit.done(function( data ) {
        alert(data);
        $('#total_spend').html('Total: £'+total_spend);
        });     
    });});

像处理 post 方法一样处理 php。在mysql更新代码下的底部你可以 echo 'Whatever Message you want to render in the alert message here.';

如果您不想要警报，请将其从 jquery 中移除

调用 jQUERY

...?>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
 $(function() { 
        $( "#this_type" ).change(function(){
            var total_spend = parseInt($('#this_postage').val()) + parseInt($('#this_type').val());
            $('#total_spend').html('Total: £'+total_spend);
    }); 
</script>