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

你好，我一直很困惑如何做到这一点，并没有找到任何相关的教程，可以帮助我，所以我想我会问这里，希望找到帮助

我有一个表单，有两个下拉菜单，每个菜单都有一个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代码中实现这一点

---

有什么帮助吗？

我不知道您是否想将其添加到所选数据库中。。。这需要一个简单但不同的代码。这将实现您的要求

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

您必须按如下方式标识每个选择框：

HTML

当用户选择类型时，jQuery将获取更改并获取邮资和类型的值，然后将它们相加，然后在总计中呈现总计：此处为总计

此代码将发送到DB：

同样，不需要表单标签：

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>';

像对待post方法一样对待处理php。在mysql更新代码的底部，您可以 回显“您希望在此处的警报消息中呈现的任何消息”

如果不需要警报，请将其从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>

---

您可以使用几行jquery来显示总数。工作示例：

---

您将需要使用Ajax来完成您正在尝试的工作，这个示例将帮助您，我希望是的，正如Balder所说，唯一的方法是使用Ajax。这里有一个可能会有所帮助的资源—这种情况不需要AJAX。简单javascript可用于根据菜单中的值计算和显示值。是的，我不想向数据库添加任何内容，我只是从数据库中检索数据并将两个值相加。但是对于java，我是将它保存在同一个php文件中还是必须在新文件中区分它？这取决于您。。。如果您将其保存在php文件中，则需要在此处添加PutjQuery，如果您尚未在页面上添加JQUERY，则还需要链接到JQUERY。我会在页面底部链接到您的jquery，并将上面的脚本标记放在jquey链接下面，在您的结束？>@Diamonddallas我编辑了代码。。。在输入parseInt时，请看@Maverick976I的第二个答案，我已经启动并运行了菜单，但它必须是我输入java脚本的地方，我一定是在这里搞砸了。因此，在我的整个php文档关闭之后，在我放置JQUERY之后，我想我在这里缺少的是对该标记的引用，因为从下拉列表中选择项目不会更新任何内容或显示总数_spend@DiamondDallas ... sry没有回来就去吃饭了。。。我在答案中添加了调用juery所需的代码

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>';

$(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);
        });     
    });});

...?>
<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>

<select class="postage demo" name='Postage'>
    <option value='0'>Please select postage...</option>
    <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>

<!-- example output from PHP -->
<select class="type demo" name='Type'>
    <option value='0'>Please select type...</option>
    <option value='12'>Box</option>
    <option value='5'>Envelope</option>
    <option value='3'>Card</option>
</select>

<label>Total:</label>
<input name='total' id='total' disabled='true' value=''>

$(document).ready(function(){
    $('.demo').change(function(){
        var postage = parseInt($('.postage').val());
        var type = parseInt($('.type').val());
        var total = postage + type;
        $('#total').val('$' + total.toFixed(2));
    }); 
});