我的动态购物车属性 - 第二个属性为每个订单显示相同的值

Question

我的购物车页面上有两个用于收集购物车属性的动态下拉列表 - 第一个是 select 您所在的州，第二个下拉列表是该州的设施列表。前端的一切看起来都很棒。状态的第一个下拉列表有效并完美地保存了信息。第二个下拉菜单在前端看起来不错，但每次都保存不正确的值 - 第二个下拉菜单总是保存相同的值 - 3108。

我使用三个文件加载它们 - 我的辅助下拉菜单现在加载到一个 html 文件中，因为它太大而无法加载到 cart-template.liquid 文件中。

购物车-template.liquid：


    <div> <p class="cart-attribute" id="PrisonDropdownCart" >
              <label><b>Please select</b> the state and name of the prison facility you are ordering for.</label><br>
                <label style="display:none;">State</label>
              <select required class="required states" id="state" name="attributes[state]">
                <option value="" disabled="" selected=""{% if cart.attributes["state"] == "Disabled" %} selected{% endif %}>Please Select a State</option>
                <option value="Alabama" {% if cart.attributes["state"] == "Alabama" %} selected{% endif %}>Alabama</option>
                <option value="Alaska" {% if cart.attributes["state"] == "Alaska" %} selected{% endif %}>Alaska</option>
                <option value="Arizona" {% if cart.attributes["state"] == "Arizona" %} selected{% endif %}>Arizona</option>
                <option value="Arkansas" {% if cart.attributes["state"] == "Arkansas" %} selected{% endif %}>Arkansas</option>
                <option value="California" {% if cart.attributes["state"] == "California" %} selected{% endif %}>California</option>
                <option value="Colorado" {% if cart.attributes["state"] == "Colorado" %} selected{% endif %}>Colorado</option>
                <option value="Connecticut" {% if cart.attributes["state"] == "Connecticut" %} selected{% endif %}>Connecticut</option>
                <option value="Delaware" {% if cart.attributes["state"] == "Delaware" %} selected{% endif %}>Delaware</option>
                <option value="District of Columbia" {% if cart.attributes["state"] == "District of Columbia" %} selected{% endif %}>District of Columbia</option>
                <option value="Florida" {% if cart.attributes["state"] == "Florida" %} selected{% endif %}>Florida</option>
                <option value="Georgia" {% if cart.attributes["state"] == "Georgia" %} selected{% endif %}>Georgia</option>
                <option value="Hawaii" {% if cart.attributes["state"] == "Hawaii" %} selected{% endif %}>Hawaii</option>
                <option value="Idaho" {% if cart.attributes["state"] == "Idaho" %} selected{% endif %}>Idaho</option>
                <option value="Illinois" {% if cart.attributes["state"] == "Illinois" %} selected{% endif %}>Illinois</option>
                <option value="Indiana" {% if cart.attributes["state"] == "Indiana" %} selected{% endif %}>Indiana</option>
                <option value="Iowa" {% if cart.attributes["state"] == "Iowa" %} selected{% endif %}>Iowa</option>
                <option value="Kansas" {% if cart.attributes["state"] == "Kansas" %} selected{% endif %}>Kansas</option>
                <option value="Kentucky" {% if cart.attributes["state"] == "Kentucky" %} selected{% endif %}>Kentucky</option>
                <option value="Louisiana" {% if cart.attributes["state"] == "Louisiana" %} selected{% endif %}>Louisiana</option>
                <option value="Maine" {% if cart.attributes["state"] == "Maine" %} selected{% endif %}>Maine</option>
                <option value="Maryland" {% if cart.attributes["state"] == "Maryland" %} selected{% endif %}>Maryland</option>
                <option value="Massachusetts" {% if cart.attributes["state"] == "Massachusetts" %} selected{% endif %}>Massachusetts</option>
                <option value="Michigan" {% if cart.attributes["state"] == "Michigan" %} selected{% endif %}>Michigan</option>
                <option value="Minnesota" {% if cart.attributes["state"] == "Minnesota" %} selected{% endif %}>Minnesota</option>
                <option value="Mississippi" {% if cart.attributes["state"] == "Mississippi" %} selected{% endif %}>Mississippi</option>
                <option value="Missouri" {% if cart.attributes["state"] == "Missouri" %} selected{% endif %}>Missouri</option>
                <option value="Montana" {% if cart.attributes["state"] == "Montana" %} selected{% endif %}>Montana</option>
                <option value="Nebraska" {% if cart.attributes["state"] == "Nebraska" %} selected{% endif %}>Nebraska</option>
                <option value="Nevada" {% if cart.attributes["state"] == "Nevada" %} selected{% endif %}>Nevada</option>
                <option value="New Hampshire" {% if cart.attributes["state"] == "New Hampshire" %} selected{% endif %}>New Hampshire</option>
                <option value="New Jersey" {% if cart.attributes["state"] == "New Jersey" %} selected{% endif %}>New Jersey</option>
                <option value="New Mexico" {% if cart.attributes["state"] == "New Mexico" %} selected{% endif %}>New Mexico</option>
                <option value="New York" {% if cart.attributes["state"] == "New York" %} selected{% endif %}>New York</option>
                <option value="North Carolina" {% if cart.attributes["state"] == "North Carolina" %} selected{% endif %}>North Carolina</option>
                <option value="North Dakota" {% if cart.attributes["state"] == "North Dakota" %} selected{% endif %}>North Dakota</option>
                <option value="Ohio" {% if cart.attributes["state"] == "Ohio" %} selected{% endif %}>Ohio</option>
                <option value="Oklahoma" {% if cart.attributes["state"] == "Oklahoma" %} selected{% endif %}>Oklahoma</option>
                <option value="Oregon" {% if cart.attributes["state"] == "Oregon" %} selected{% endif %}>Oregon</option>
                <option value="Pennsylvania" {% if cart.attributes["state"] == "Pennsylvania" %} selected{% endif %}>Pennsylvania</option>
                <option value="Puerto Rico" {% if cart.attributes["state"] == "Puerto Rico" %} selected{% endif %}>Puerto Rico</option>
                <option value="Rhode Island" {% if cart.attributes["state"] == "Rhode Island" %} selected{% endif %}>Rhode Island</option>
                <option value="South Carolina" {% if cart.attributes["state"] == "South Carolina" %} selected{% endif %}>South Carolina</option>
                <option value="South Dakota" {% if cart.attributes["state"] == "South Dakota" %} selected{% endif %}>South Dakota</option>
                <option value="Tennessee" {% if cart.attributes["state"] == "Tennessee" %} selected{% endif %}>Tennessee</option>
                <option value="Texas" {% if cart.attributes["state"] == "Texas" %} selected{% endif %}>Texas</option>
                <option value="Utah" {% if cart.attributes["state"] == "Utah" %} selected{% endif %}>Utah</option>
                <option value="Vermont" {% if cart.attributes["state"] == "Vermont" %} selected{% endif %}>Vermont</option>
                <option value="Virginia" {% if cart.attributes["state"] == "Virginia" %} selected{% endif %}>Virginia</option>
                <option value="Washington" {% if cart.attributes["state"] == "Washington" %} selected{% endif %}>Washington</option>
                <option value="West Virginia" {% if cart.attributes["state"] == "West Virginia" %} selected{% endif %}>West Virginia</option>
                <option value="Wisconsin" {% if cart.attributes["state"] == "Wisconsin" %} selected{% endif %}>Wisconsin</option>
                <option value="Wyoming" {% if cart.attributes["state"] == "Wyoming" %} selected{% endif %}>Wyoming</option>
              </select>
              </p>

            <div id="PrisonDropdown">
            </div>   
            <br>
            </div>
 <script>
jQuery(function(){
$("#PrisonDropdown").load('https://cdn.shopify.com/s/files/1/0060/7577/7135/t/2/assets/PrisonDropdown.html');
                  });
 </script>

theme.liquid:

{% if template == 'cart' %}
<script>
  jQuery(window).load(function(){ 
       $('.states').on('change', function(){
          var selected = $(this).val();
          $('.select-list').addClass('select-hidden');
          $('[id="' + selected + '"]').removeClass('select-hidden');

          })
        });

   </script>

Answer 1

您的 HTML 中的所有 if 语句都不起作用并且按原样加载，因为液体代码不会在以这种方式请求它们时呈现，所以只需删除全部。
3108 值是 last select 框中的 first 选项.由于所有 select 框都具有相同的名称，无论您显示什么 select - 最后一个 select 框中的 selected 值将始终在提交时发送表格。快速解决方案是将显示的 select 框移动到底部。您可以通过在删除 select-hidden class 之后添加 .insertAfter(".select-list:last") 来实现。因此 theme.liquid 中的整行如下所示：
```
$('[id="' + selected + '"]').removeClass('select-hidden').insertAfter(".select-list:last");
```

我的动态购物车属性 - 第二个属性为每个订单显示相同的值

My Dynamic cart attributes - second attribute is showing the same value for every order

shopify