Jquery mobile Jquery移动选择选项菜单[Phonegap项目]_Jquery Mobile

Jquery mobile Jquery移动选择选项菜单[Phonegap项目]

jquery-mobile

Jquery mobile Jquery移动选择选项菜单[Phonegap项目],jquery-mobile,Jquery Mobile,我从服务器获取有关产品名称、图像、价格、类别等的信息，但我将这些信息放在“选择菜单”中，我希望当我更改“选择菜单”的选项时，我会显示一条成功警报。以下是我的代码： <!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

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

<!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>

//////////////////////////////////////////////重新编辑//////////////////////////////////

我现在可以显示警报，我想从选择菜单中选择产品，添加数量并计算价格。这是我修改后的代码。它显示警报，值=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>

更新文档后，应绑定更改事件。打印选定内容后，请尝试添加绑定：

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

我无法显示警报，因为项目是动态添加的，您应该委派更改事件$document.onchange、.comboextra、函数{alert；}；可能重复您是否可以确认您正在使用jQM？是否希望在加载选项完成时显示警报？或者当选择某个选项时？