Question

我正在努力设置一个默认WooCommerce国家/地区和州选择下拉菜单的表单。

基本上，我想显示国家/地区选择，然后根据国家/地区选择进行州选择。因此，如果用户选择英国，则会显示带有状态选择的新下拉列表。

我得到了这个：

<?php
global $woocommerce;
$countries_obj   = new WC_Countries();
$countries   = $countries_obj->__get('countries');
$default_country = $countries_obj->get_base_country();
$default_county_states = $countries_obj->get_states( $default_country );

echo '<div id="ships_from_countries_field">' . __('Countries') . '';

    woocommerce_form_field('my_country_field', array(
           'type'       => 'select',
           'class'      => array( 'chzn-drop' ),
           'label'      => __('Item ships from - country'),
           'placeholder'    => __('Select a Country'),
           'options'    => $countries
            )
     );
 echo '</div>';

 echo '<div id="ships_from_state_field">' . __('States') . '';

     woocommerce_form_field('my_state_field', array(
            'type'       => 'select',
            'class'      => array( 'chzn-drop' ),
            'label'      => __('Item ships from - state'),
            'placeholder'    => __('Select a State'),
            'options'    => $default_county_states
             )
      );
  echo '</div>';
  ?>

国家/地区的下降显示了显示商店状态的国家/地区下降 - 英国

但是我如何让它们一起工作并保存价值呢？

找不到任何信息，有没有人有这方面的经验？

Answer 1

首先，这是一个国家和州的类型......你不需要做太多......就像这样......

echo '<div id="ships_from_countries_field">' . __('Countries') . '';

    woocommerce_form_field('my_country_field', array(
       'type'       => 'country',
       'class'      => array( 'chzn-drop' ),
       'label'      => __('Item ships from - country'),
       'placeholder'    => __('Select a Country')
        )
    );
echo '</div>';

echo '<div id="ships_from_state_field">' . __('States') . '';

    woocommerce_form_field('my_state_field', array(
        'type'       => 'state',
        'class'      => array( 'chzn-drop' ),
        'label'      => __('Item ships from - state'),
        'placeholder'    => __('Select a State')
        )
    );
echo '</div>';

注意他们的类型......他们不属于选择类型。

现在你的问题..

<强> PHP

你需要有国家和州的本地化脚本......我不会继续使用wp_localize_script()。如果需要，请阅读链接。这是其中的一部分。

$wc_country = array(
    'country' => json_encode( array_merge( WC()->countries->get_allowed_country_states(), WC()->countries->get_shipping_country_states() ) )
);
wp_localize_script( 'my-js', 'my_js', $wc_country );

<强>的javascript

用你的my-js脚本（一个脚本文件），你可以读到这样的状态：

    var states_json = my_js.countries.replace( /&quot;/g, '"' ),
        states = $.parseJSON( states_json );

然后您必须在您所在的国家/地区添加更改事件，并根据所选国家/地区重新填充州...

示例：states["PH"]如果选择了国家/地区

00: "Metro Manila"
ABR: "Abra"
AGN: "Agusan del Norte"
AGS: "Agusan del Sur"
AKL: "Aklan"
ALB: "Albay"
ANT: "Antique"
APA: "Apayao"
AUR: "Aurora"
BAN: "Bataan"
BAS: "Basilan"
BEN: "Benguet"
BIL: "Biliran"
.....
WSA: "Samar"
ZAN: "Zamboanga del Norte"
ZAS: "Zamboanga del Sur"
ZMB: "Zambales"
ZSI: "Zamboanga Sibugay"

然后你可以使用jQuery构建你的选项..

var options = '',
    state = states[ country ]; // country can be: var country = $('country').val();

for( var index in state ) {
    if ( state.hasOwnProperty( index ) ) {
        options = options + '<option value="' + index + '">' + state[ index ] + '</option>';
    }
}

wc_countries - 州选择下拉列表 - woocommerce

1 个答案: