Question

在我的表单中，用户可以选择添加多个送货地址。我有一些动态创建的countries dropdowns集合，每个集合都有class="shipping_country"和id="country_<?php echo $i;?>;以及states dropdowns，每个都有class="shipping_state"和id="state_<?php echo $i;?>;。问题是，当用户在每个地址中添加多个发货地址且国家/地区处于不同状态时，则在每个ajax调用中，在发货地址的所有状态下拉列表中选择的状态值变为等于上一个状态下拉列表中的状态值收件地址。例如，如果用户在country=united states和first shipping address，state="Florida" second shipping address和州=科罗拉多州中选择country=united states，则会为两者选择州=科罗拉多州送货地址。我认为可能的解决方案是，如果我可以使用attribute id而不是类$(document).on('change', '.shipping_country', function(){，但我不知道如何在这里使用动态创建的ID。？

    *** check to load selected state and country ***
<?php if (isset($_SESSION['scountry'],$_SESSION['shipping_state']) && count($_SESSION['scountry']) && count($_SESSION['shipping_state'])>0){?>
var countryArray = <?php echo json_encode($_SESSION['scountry']); ?>;
var stateArray = '<?php echo implode(',',$_SESSION['shipping_state']); ?>';
<?php } ?>
    *** check to load selected state and country ***

 $(document).on('change', '.shipping_country', function(){
   var string_id=$(this).attr('id');
   var sid=string_id.split("_").pop();
   var id=$(this).val();
   var dataString = 'id='+ id;
       if(typeof stateArray !== 'undefined') {
          var str_array = stateArray.split(',');
       }
       $.ajax({
         type: "POST",
         url: "states.php",
         data: dataString,
         cache: false,
         success: function(html)
        {
           $("#state_"+sid).html(html);
            if(typeof str_array !== 'undefined'){
              for(var i = 1; i <= str_array.length; i++){
                 $("#state_"+sid+" option[value='"+str_array[i-1]+"']").attr("selected", "selected");
                            }
            }else{
                 $("#state_"+sid+" option:first-child").attr("selected", "selected");
            }
         }
      });
});

我发现ajax success中的循环运行的次数等于送货地址的数量，我添加了console log，例如如果我有2个送货地址，它会给我这样的日志

2 State ID in if success #state_1
2 State ID in if success #state_2

此2被包围，表示此日志有两次，我该如何解决？

     $.ajax({
       type: "POST",
       url: "states.php",
       data: dataString,
       cache: false,
       success: function(html)
       {
         $("#state_"+sid).html(html);
         if(typeof str_array !== 'undefined'){
           for(var i = 1; i <= str_array.length; i++){
               $("#state_"+sid+" option[value='"+str_array[i-1]+"']").attr("selected", "selected");
               console.log("State ID in if success #state_"+sid);  
           }
          }else{
           $("#state_"+sid+" option:first-child").attr("selected", "selected");
          }
       }
   });

更新

状态的HTML结构：

<span class="type1 form-group col-md-2"><span class="left-label"><span id="red">*</span>State/Province:</span>
    <select class="element select form-control shipping_state" id="state_<?php echo $i;?>" name="shipping_state[]">
        <?php if(isset($_SESSION['shipping_state']) && $_SESSION['shipping_state'][$i-1]!= ''){?>
        <option selected="selected" value="<?php echo $_SESSION['shipping_state'][$i-1]; ?>"><?php echo $_SESSION['shipping_state'][$i-1] ?></option>
        <?php }  else{ echo $us_statesList;  } ?>

    </select>
</span>

HTML位于单独的文件shipping.php中，jquery位于header.php我尝试过这样做

$(document).on('change', '#country_1,#country_2,#country_3', function(){

它不起作用，如果我做这样的事情有效，那么问题将是这样我无法确定用户是否只添加3个送货地址，因为他们可以选择添加任意数量的。

Jquery：$（document）.on（'change'，'。skip_country'，function（）与动态创建的元素无法正常工作

0 个答案: