下拉html

Question

正如标题所示，我有一个下拉的问题。它包含商店可以运送的国家/地区列表。它可以创建一个运输区域，为其命名，然后选择属于该区域的所有国家/地区。然后为它添加价格。

在结帐时我想获取网店提供的国家列表并使用它，以便客户可以选择他住的地方。该国的选择是商店也出货的产品。但是我遇到了一些问题。

主要的问题是它的构造方式是选择一个区域，该区域将使用URL中的额外参数重新加载页面，这将把运送区域添加到即将创建的订单中。这会导致我的下拉问题。因为它总是选择下拉选项的底部选项而不是我刚选择的选项，这意味着我无法正确设置该人所在的国家。

所以如果是下拉列表

美国
中国

我选择美国页面将重新加载，中国将会悬停

我的代码：

下拉html

{% for shippingRegion in store.getShippingRegions %}
    <a style="display: none" id="addShippingRegion{{shippingRegion.id}}" href="{{ path('checkout', {'store_id': store.id, 'shippingRegion': shippingRegion.id}) }}"></a>
{% endfor %}

 <div class="collection">
     <select onchange="shippingRegionSelectCheck(this)" class="browser-default" id="shippingRegion" name="ShippingRegion">
           <option selected disabled>Select a shipping region</option>
              {% for key,country  in regionCountries %}
                  {% for c in country %}  = 
                    <option id="countrySelect" data-id="{{key}}" selected value="{{c}}" >{{c}}</option>   
                  {% endfor %}
             {% endfor %}
      </select>
</div>

重新加载页面的Javascript函数

function shippingRegionSelectCheck(regionSelect){
    if(regionSelect){
         var selected = $('#shippingRegion').find('option:selected');
         var extra = selected.data('id'); 
         var country = $('#shippingRegion').val('value');
         var href = $('#addShippingRegion' + extra).attr('href');

         window.location.href = href; 
    }

}

实体

/**
 * @ORM\Entity
 * @ORM\Table(name="Shipping_Regions")
 */
class ShippingRegion{
    public function __construct() {
        $this->shipping_weight_prices = new ArrayCollection();
        $this->shipping_amount_prices = new ArrayCollection();
    }

    /**
     * @ORM\Column(type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    protected $id;

    /**
     * @ORM\Column(type="string", length=100, nullable=true)
     */
    protected $name;

    /**
     * @ORM\Column(type="boolean", nullable=true)
     */
    protected $regionType;

    /**
     * @ORM\Column(type="array", nullable=true)
     */
    protected $regionCountry;

Answer 1

也许是因为你在每个选项中都有“选中”，所以浏览器会选择最后一个选项。

<option id="countrySelect" data-id="{{key}}" {{ c == selected_country ? 'selected' }} value="{{c}}" >{{c}}</option>

Answer 2

我陷入困境的原因部分是由于我自己的陷入困境。我所做的就是给各国提供他们自己的ID，这样就可以在HTML和JS中用来刷新使用的数据。使用名为cId的可空参数在路径中设置并使用其数据。希望这个答案能在将来帮助其他人

/**
     * @Route("/checkout/{store_id}/{shippingRegion}/{cId}", name="checkout", defaults={"shippingRegion" = null, "cId" = null})
     */
    public function showAction($store_id, $shippingRegion, $cId, Request $request)

为各国提供自己的身份证件

foreach ($webstore->getShippingRegions() as $shippingRegions) {
            foreach ($shippingRegions->getRegionCountry() as $key=>$regionCountry) { 
// key being the ID used for countries
                  $regionCountries[$shippingRegions->getId()][$key] = Intl::getRegionBundle()->getCountryName($regionCountry);
             }  
    }

下拉菜单的枝条：

 {% for key,country  in regionCountries %}
    {% for id,c in country %}
       {% if shippingRegionEntity is defined and shippingRegionEntity is not null and key == shippingRegionEntity.getId and cId is defined  and cId is not null  and cId == id %}
         <option id="countrySelect" data-cId="{{id}}" selected checked data-id="{{key}}" >{{c}}</option>
       {% else %}
         <option id="countrySelect" data-cId="{{id}}" data-id="{{key}}" >{{c}}</option>
       {% endif %}                                      
    {% endfor %}
{% endfor %}

最后我用JS刷新页面并加载数据：

function shippingRegionSelectCheck(regionSelect){
    if(regionSelect){
         var selected = $('#shippingRegion').find('option:selected');
         var extra = selected.data('id'); 
         var country = selected.attr('data-cId');

         var href = $('#addShippingRegion' + extra ).attr('href')+ '/' + country;
         window.location.href = href; 

    }

}

由一系列国家/地区填充的下拉列表

下拉html

重新加载页面的Javascript函数

实体

2 个答案: