Question

我有一个WordPress页面，其中默认的登录/注册页面被禁用，我让用户通过WooCommerce登录/注册页面进行注册，并通过我的主题的functions.php添加了许多自定义字段。

这些字段之一是一个下拉字段，可让用户选择其国家/地区。

如果用户错过了注册表中的某些内容，并且页面重新加载（错误消息告诉用户缺少了什么），则文本字段将使用其先前的文本预先填充。但是，下拉菜单会恢复为中立选项，而不会记住其先前的值。

我的代码如下：

<?php add_filter( 'woocommerce_register_form', 'adding_custom_registration_fields' );
function adding_custom_registration_fields($fields) {
$countries_obj = new WC_Countries();
$countries = $countries_obj->__get('countries'); ?>

<div class="form-row form-row-wide">
    <label for="reg_billing_country"><?php _e( 'Country', 'woocommerce' ); ?> <span class="required">*</span></label>
    <select class="country_select sk-required" data-sk-tooltip="Required" name="billing_country" id="reg_billing_country">
        <option value=""> <?php _e('Select country','my-theme'); ?></option>
        <?php foreach ($countries as $key => $value): ?>
            <option value="<?php echo $key?>"><?php echo $value?></option>
        <?php endforeach; ?>
    </select>
</div>

我希望下拉列表字段能够在页面重新加载时记住其值，就像文本字段一样。我可以使用html来鼓励浏览器缓存值吗？

我尝试了

var selectedItem = sessionStorage.getItem("country_select_session"); 
$('#reg_billing_country').val(selectedItem); 
$('#reg_billing_country').change(function() { 
  var dropVal = $(this).val(); 
  sessionStorage.setItem("country_select_session", dropVal); 
});

但是，仅当我使用F5手动重新加载页面时，该值才会保留。如果通过单击表单格式不完整的“提交”按钮重新加载页面，则下拉菜单将恢复为默认值，而忽略脚本

Answer 1

我可以正常使用-原来脚本未正确放置，因此未执行。感谢@mplungjan指出来。

我在</body>标签之前添加了上述脚本，并在我的functions.php中添加了以下代码：

add_action( 'wp_footer', function () { ?>
    <script language="javascript" type="text/javascript">
        var selectedItem = sessionStorage.getItem("country_select_session");  
        $('#reg_billing_country').val(selectedItem);

        $('#reg_billing_country').change(function() { 
            var dropVal = $(this).val();
            sessionStorage.setItem("country_select_session", dropVal);
        });
    </script>
<?php } );

通过wp_footer操作钩，脚本已正确放置并执行。

如果重新加载注册页面，请记住HTML下拉值

1 个答案: