Question

我从服务器获取有关产品名称，图像，价格，类别等的信息，但是我将信息放在选择菜单中，我希望当我更改选择菜单的选项时，我显示警报成功，这里是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>

</head>
 <body onLoad="Extra(); " >

            <div id="extra" >
            </div>          
    <script type="text/javascript" > 
        function Extra()
            {      

            var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
             $.post("http://www.test.com/webservice/?contentType=application/json", callData, function(data)
                     {
                $.each(data, function( index, value)
                    {                       
                    $("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');                        
                    $.each(value["items"],function(index1,value1)
                            { 
                        $("#test"+index).append('<option  prix="'+value1["prix"]+'"cat="'+value1["cat"]+'"  value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');

                            });
                    $("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
                    //alert("test");
                    }); 

                }); 

            }


         $(document).on("change", ".comboextra", function ()
                 {
              alert($(this).find(".comboextra option:selected").attr("prix"));               
              id = $(this).val(); 
              prix = $("option:selected", this).attr("prix")
              qte = $(".quantiteextra").val();
              acccat = $("option:selected", this).attr("cat");
              total = prix * qte;
              acccat = ($(this).find(".comboextra option:selected").attr("cat"));

             if (id != 0){$('#finaldata').find("[acccat="+acccat+"]").remove(); $("#finaldata").append('<input type="tex00t" acccat="'+acccat+'" id="acc'+id+'" name="acc['+id+']" value="'+qte+'">');} else {$('#finaldata').find("[acccat="+acccat+"]").remove();}
             $(this).find(".totalprix").html(total);

                 });

    </script>       

<body>       
</html>

////////////////////////////////////////////// EDITED AGAIN //////////////////////////////////

我现在可以显示警报，我想从选择菜单中选择产品并添加数量并计算价格这里是修改后我的代码显示警报和值= 0，它不计算而不显示即使我更改数量和更改产品时的任何值：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>

</head>
<body onLoad="Extra(); " >

            <div id="extra" >
            </div>          

            <div id="finaldata"></div>

    <script type="text/javascript" > 
        function Extra()
            {      

            var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
             $.post("http://www.test.com/webservice/?contentType=application/json", callData, function(data)
                     {
                $.each(data, function( index, value)
                    {                       
                    $("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');                        
                    $.each(value["items"],function(index1,value1)
                            { 
                        $("#test"+index).append('<option  prix="'+value1["prix"]+'"cat="'+value1["cat"]+'"  value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');

                            });
                    $("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
                    //alert("test");
                    }); 

                }); 

            }


         $(document).on("change", ".comboextra", function ()
                 {
              alert($(this).find(".comboextra option:selected").attr("prix"));               
              id = $(this).val(); 
              prix = $("option:selected", this).attr("prix")
              qte = $(".quantiteextra").val();
              acccat = $("option:selected", this).attr("cat");
              total = prix * qte;
              acccat = ($(this).find(".comboextra option:selected").attr("cat"));

             if (id != 0){$('#finaldata').find("[acccat="+acccat+"]").remove(); $("#finaldata").append('<input type="tex00t" acccat="'+acccat+'" id="acc'+id+'" name="acc['+id+']" value="'+qte+'">');} else {$('#finaldata').find("[acccat="+acccat+"]").remove();}
             $(this).find(".totalprix").html(total);

                 });

    </script>       

<body>       
</html>

Answer 1

更新文档后，应绑定change事件。打印选择后尝试添加绑定：

function Extra()
        {      
        var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
        $.post("http://www.test.com/webservice/?contentType=application/json", callData,
        function(data)
            {
                $.each(data, function( index, value)
                    {                       
                    $("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');                        
                    $.each(value["items"],function(index1,value1)
                        { 
                        $("#test"+index).append('<option  prix="'+value1["prix"]+'"cat="'+value1["cat"]+'"  value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');
                        });
                    $("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
                });  
                $(".comboextra").change(function()
                {
                    alert("success");               
                });
            });
        }

Jquery Mobile选择选项菜单[Phonegap Project]

1 个答案: