Javascript wc_国家/地区-州选择下拉列表-商业

我正在努力设置一个带有默认的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>';
  ?>

Countries（国家）下拉列表显示的是国家和州下拉列表，显示的是商店基地的州-英国

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

---

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

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

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>';

javascript

这样，在您的

myjs

脚本（脚本文件）中，您可以读取如下状态：

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

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

示例：

说明[“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>';
    }
}

var选项=“”，
州=州[国家]；//国家可以是：var country=$（'country'）.val（）；
for（状态中的var索引）{
if（state.hasOwnProperty（索引））{
选项=选项+“”+状态[索引]+“”；
}
}

老实说，我很困惑。你认为你为什么要这样做？WooCommerce是开箱即用的-这是定制表单吗？或者你在哪一页上做这件事？那么我如何实现默认的WC功能呢？你能给我指一下正确的方向吗？我试图复制结帐页面并从那里获得它，但这似乎有点太令人困惑了。这段代码是我在搜索了几天后发现的唯一一件关于如何让国家和州选择生效的东西。你在哪一页上做这件事？你到底想做什么？这是我的另一个插件模板页面。该插件提供从前端编辑产品的功能。在这个页面上，我需要放置一个国家选择下拉列表和州选择下拉列表。Reigel，我真的非常感谢你在这方面的帮助。。我一直在四处寻找解决方案，我会着手解决并将结果发回。。再次感谢您抽出时间。这一条必须标记为已接受的答案。您不仅给出了想法，而且给出了完整的解决方案：）

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>';
    }
}