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

Hi I have been very puzzled how to do this and cannot find any relevant tutorial that could help me so I thought I would ask here and hope to find the help.

我有2下拉菜单形式，他们每个人有一个值属性。我想要做的就是让别人挑一个项目过一滴下来，又掉对方下拉。

I have a form with 2 drop down menus, each of them having a value attribute. What I want to do is allow someone to pick one item off one drop down and another off the other drop down.

在两个下拉列表已经一项挑，该人示出它是由下拉1和下拉累计断值的总和2

Once both drop downs have an item picked, the person is shown a total sum which is accumulated off the values from Drop Down 1 and Drop Down 2

下面是我的code这是远不什么是正确的。

Here is my code which is nowhere near anything correct.

<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 code。

I understand I will get replies saying you need to do this through javascript, but I have no idea how to implement this into a javascript code.

任何帮助吗？

推荐答案

我不知道你的问题，如果你想将其添加到该选择的分贝...这将需要一个简单的，但不同的code 。这将完成你所问。

I am not sure by your question if you want to add it to the db on the selection... that would require a simple but different code. This will accomplish what you are asking.

您不需要形式...只是选择框。如果您发现我的回声标签包裹每件的HTML ...这写了一个最小化code到浏览器。

You do not need a form... just the selection boxes. If you notice I encased each piece of html in an echo tag... this writes a minimized code to the browser.

您必须 ID 每个选择框，如下所示：

You have to id each selection box as follows:

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

注意使用的DIV ID =total_spend。

JQUERY

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

当用户选择了键入的jQuery将拿起变化并得到双方的邮资和类型的值，并添加它们，然后全部呈现在＆LT; D​​IV ID =total_spend＆GT;合计：£总此处＆lt; / DIV＆GT;

When the user selects the Type the jQuery will pick up the change and get the values of both the postage and type and add them and then render the total in the <div id="total_spend">Total: £TOTAL HERE</div>

这code将发送给数据库：

THIS CODE WILL SEND TO DB:

再没有任何形式的标签要求：

Again no form tag required:

HTML：

补充隐藏输入保存处理URL

Added hidden input to hold processing 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：

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

对待处理PHP，你会与POST方法。在根据MySQL的更新code可以底部 回声不管消息要提醒消息这里呈现。';

Treat the processing php as you would with the post method. At the bottom under the mysql update code you can echo 'Whatever Message you want to render in the alert message here.';

如果你不想警报从jQuery中删除

If you do not want an alert remove it from the 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>