Question

我在下面编码时遇到了麻烦，我无法使用选项中的选项进行更改，这里我使用while循环来获取所有列在多个选择框中并用于Ajax更新时我选择，它只适用于第一组列表，当我选择它在第一个选择框中实现的其他选择

这里是代码Ajax Code

$("#newqty").change(function(){ 

                var cartid=$('#cartid').val();

                //$('.form-select').ajaxSubmit(function(){

                var newqty = $(this).val(); 
                        var dataString = "newqty="+newqty+"&cartid="+cartid;

                            $.ajax({
                                type: "POST", 
                                url: "changeprice.php", 
                                data: dataString,
                                async:false,    
                                })

                                 .done(function(result){ //on Ajax success
                                    alert("Selected"+dataString);

                                    //$("#show").html(result);  //alert user

                                    })


                        });

这里是他的php编码

 <tr id='cartitems'><td><img style='height:90px; width:90px;' src='../e-comm/images/Lotus_truffles.jpg' alt='img'></td>
                    <td><h5 style='padding:10px; font-size:20px;'>Lotus Truffles</h5></td>
                     <td> 
                    <form method='post' class='form-select'>
                     <input type='text'  name='cartid' id='cartid' value=12 hidden>
                     <select name='newqty' id='newqty'><option value='qty'>Select Quantity</option>
                    <option selected='selected' value='12' select>12</option>
                    <option value='24'>24</option>
                    <option value='30'>30</option>
                    <option value='50'>50</option>
                    </select></form></td>

                    <td><h4 align='center' style='padding:20px;'>420 QAR</h4></td>
                 <td><a class='btn btn-primary' href='../e-comm/removecart.php?cartid=12'>delete</a></td>
                </tr>

          <tr id='cartitems'><td><img style='height:90px; width:90px;' src='../e-comm/images/white_digestive.jpg' alt='img'></td>
                <td><h5 style='padding:10px; font-size:20px;'>White Chocolate Digestive Truffles</h5></td>
                 <td> 
                <form method='post' class='form-select'>
                 <input type='text'  name='cartid' id='cartid' value=13 hidden>
                 <select name='newqty' id='newqty'><option value='qty'>Select Quantity</option>
                    <option selected='selected' value='12' select>12</option>
                    <option value='24'>24</option>
                    <option value='30'>30</option>
                    <option value='50'>50</option>
                    </select></form></td>

                    <td><h4 align='center' style='padding:20px;'>420 QAR</h4></td>
                 <td><a class='btn btn-primary' href='../e-comm/removecart.php?cartid=13'>delete</a></td>
                </tr>

          <tr id='cartitems'><td><img style='height:90px; width:90px;' src='../e-comm/images/Blueberry-Cheesecake.png' alt='img'></td>
                <td><h5 style='padding:10px; font-size:20px;'>Blueberrry Cheesecake</h5></td>
                 <td> 
                <form method='post' class='form-select'>
                 <input type='text'  name='cartid' id='cartid' value=14 hidden>
                 <select name='newqty' id='newqty'><option value='qty'>Select Quantity</option>
                    <option selected='selected' value='12' select>12</option>
                    <option value='24'>24</option>
                    <option value='30'>30</option>
                    <option value='50'>50</option>
                    </select></form></td>

                    <td><h4 align='center' style='padding:20px;'>420 QAR</h4></td>
                 <td><a class='btn btn-primary' href='../e-comm/removecart.php?cartid=14'>delete</a></td>
                </tr>

          <tr id='cartitems'><td><img style='height:90px; width:90px;' src='../e-comm/images/lotus_cheesecake.jpg' alt='img'></td>
                <td><h5 style='padding:10px; font-size:20px;'>Lotus Cheesecake</h5></td>
                 <td> 
                <form method='post' class='form-select'>
                 <input type='text'  name='cartid' id='cartid' value=15 hidden>
                 <select name='newqty' id='newqty'><option value='qty'>Select Quantity</option>
                    <option selected='selected' value='12' select>12</option>
                    <option value='24'>24</option>
                    <option value='30'>30</option>
                    <option value='50'>50</option>
                    </select></form></td>

                    <td><h4 align='center' style='padding:20px;'>540 QAR</h4></td>
                 <td><a class='btn btn-primary' href='../e-comm/removecart.php?cartid=15'>delete</a></td>
                </tr>

这里我希望在选择我的选项时提交表单，例如，当我选择它应该选择的30时，它应该得到输入框和选择的值。当我选择任何选项时，它应该提交表格

Answer 1

您的代码不完整，但是，查看您的javascript中的注释行我猜您正在替换您的ajax调用中的DOM。这将删除“更改”触发器的事件绑定。

尝试更改以下行：

$("#newqty").change(function(){

到此......

$(document).on('change', '#newqty', function() {

Answer 2

问题是你重复了id（这应该是唯一的）。您可以在选择中添加一个类：

<select name='newqty' id='newqty' class="yourClass"><option value='qty'>

和js：

$(document).on('change', '.yourClass', function() {...

我建议让id也是唯一的。

L.E：改变这个：

 <input type='text' class='cartClass' name='cartid' id='cartid' value=12 hidden>

$(document).on('change', '.yourClass', function() {...
       var cartid=$(this).siblings('.cartClass').val(); ...

Answer 3

此代码确实可以处理我的错误

$(document).on('change', '#newqty', function() {

                    var cartid=$(this).siblings('#cartid').val();


                    var newqty = $(this).val(); 
                            var dataString = "newqty="+newqty+"&cartid="+cartid;

                                $.ajax({
                                    type: "POST", 
                                    url: "changeprice.php", 
                                    data: dataString,

                                    })

                                     .done(function(result){ //on Ajax success
                                        alert("Selected"+dataString);



                                        })

                            });

这里.siblings阻止了对所有表单继承相同的carid

使用Ajax，我只能改变第一个选择，

3 个答案: