所以我有一个Checkout页面收集运送和帐单地址。国家/地区和州选项使用Chosen by Harvest的下拉框为每个国家/地区提供不同的州名单。但是,在提交时,页面将以更新的运输成本重新加载,并且在这样做时,所选状态将恢复为第一选择(即阿拉斯加州)。保留country选项,但生成状态选项的方式是保持state选项不被保留。
以下是相关的javascript:
var GBSStates;
(function(j){
/*!
* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*
* Extended by Jonathon Byrd to include function hooks
* https://gist.github.com/Jonathonbyrd/724083
*
* Don't forget your Shims!
* https://github.com/kriskowal/es5-shim/blob/master
*/
(function(){var a=false,b=/xyz/.test(function(){xyz})?/\b_super\b/:/.*/;function c(h){var f=h,e={before:[],after:[]};function g(){var j=[].slice.call(arguments,0),k=0,l;for(k=0;!!e.before[k];k+=1){l=e.before[k];l.apply(this,j)}var m=f.apply(this,arguments);for(k=0;!!e.after[k];k++){l=e.after[k];l.apply(this,j)}return m}g.bind=function(i){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var m=Array.prototype.slice.call(arguments,1),l=this,j=function(){},k=function(){return l.apply(this instanceof j&&i?this:i,m.concat(Array.prototype.slice.call(arguments)))};j.prototype=this.prototype;k.prototype=new j();return k};g.addHook=function(j,i){if(e[j] instanceof Array){e[j].push(i)}else{throw (function(){var k=new Error("Invalid hook type");k.expected=Object.keys(e);k.got=j;return k}())}};return g}function d(f,e){if(typeof jQuery=="undefined"){return f}return jQuery.extend(true,e,f)}this._Class=function(){};_Class.extend=function(i){var g=this.prototype;a=true;var f=new this();a=false;for(var e in i){f[e]=typeof i[e]=="function"&&typeof g[e]=="function"&&b.test(i[e])?(function(j,k){return function(){var m=this._super;this._super=g[j];var l=k.apply(this,arguments);this._super=m;return l}})(e,i[e]):(typeof i[e]=="function"?c(i[e]):(typeof i[e]=="object"&&typeof g[e]=="object"?d(i[e],g[e]):i[e]))}function h(){if(!a&&this.init){this.init.apply(this,arguments)}}h.prototype=f;h.constructor=h;h.extend=c(arguments.callee);return h}})();Class=_Class.extend({defaults:{container:null},data:{},init:function(a){this.setOptions(a)},setOptions:function(c){var b=new Object();for(var a in this.defaults){b[a]=this.defaults[a]}for(var a in c){b[a]=c[a]}this.data=b;return this},set:function(b,a){this.data[b]=a},get:function(a,b){return typeof this.data[a]!="undefined"?this.data[a]:b},element:function(){return this.get("container")},rawElement:function(){return this.element().context},uid:function(){return this._uid().replace(/[/,'').replace(/]/,"").replace(/:/,"")},_uid:function(){if(this.element().attr("id")){return this.element().attr("id")}if(this.element().attr("name")){return this.element().attr("name")}var a="";if(this.element().context.form.id){a=this.element().context.form.id}if(!a&&this.element().context.form.name){a=this.element().context.form.name}return a+this.element().index()}});
GBSStates = Class.extend({
defaults : {
container : null,
stateselect : '#gb_billing_zone',
stateselectparent : null,
hiddenstate : '#gb_billing_zone_text',
hiddenstateparent : null,
states : [],
chosen : {
allow_single_deselect: true,
no_results_text: "Oops, nothing found!",
width: '300px'
}
},
// Initializing
init: function(o)
{
this.setOptions(o);
this.set('stateselect', j(this.get('stateselect')));
this.set('stateselectparent', this.get('stateselect')
.closest('tr'));
this.set('hiddenstate', j(this.get('hiddenstate')));
this.set('hiddenstateparent', this.get('hiddenstate')
.closest('tr'));
this.storeOriginal();
this.addListeners();
this.recreate();
},
// store the original select box
storeOriginal: function()
{
var optgroups = {};
j(this.get('stateselect')).find('optgroup').each(function(k,v){
var options = {};
j(this).find('option').each(function(k,v){
options[j(v).val()] = j(v).text();
});
optgroups[j(v).attr('label')] = options;
});
this.set('states', optgroups);
// delete the original
j(this.get('stateselect')).find('optgroup').remove();
},
// create the chosen select boxes and set the listeners
addListeners: function()
{
this.get('stateselect').chosen(this.get('chosen'))
.change(this.update.bind(this));
this.element().chosen(this.get('chosen'))
.change(this.recreate.bind(this));
},
update: function(e)
{
var chosenstate = j(e.currentTarget);
this.get('hiddenstate').val( chosenstate.val() );
},
// recreate the state select boxes
recreate: function()
{
var country = this.element().val();
var states = this.get('states')[country];
var stateselect = this.get('stateselect');
if (states) { // enable chosen select box
this.get('hiddenstate').val('');
this.get('hiddenstateparent').hide();
this.get('stateselectparent').show();
stateselect.find('option').remove();
j.each(states, function( k, v ){
// k is the key from opts, ex : value_1
// v is the value attributet to k, ex : value #1
j('<option />', {
text : v,
value : k
}).appendTo( stateselect );
});
//stateselect.trigger("chosen:updated");
stateselect.data("chosen").destroy().chosen(this.get('chosen'));
} else { // enable text field
this.get('hiddenstateparent').show();
this.get('stateselectparent').hide();
}
}
});
j.fn.GBSStates = function(o){
// initializing
var args = arguments;
var o = o || {'container':''};
return this.each(function(){
// load the saved object
var api = j.data(this, 'GBSStates');
// create and save the object if it does not exist
if (!api) {
o.container = j(this);
api = new GBSStates(o);
j.data(this, 'GBSStates', api);
}
if (typeof api[o] == 'function') {
if (args[0] == o) delete args[0];
api[o].bind(api);
var parameters = Array.prototype.slice.call(args, 1);
return api[o].apply(api,parameters);
}
return api;
});
};
})(jQuery);
jQuery(document).ready(function() {
jQuery('#gb_billing_country').GBSStates({
stateselect : '#gb_billing_zone'
});
jQuery('#gb_shipping_country').GBSStates({
stateselect : '#gb_shipping_zone',
hiddenstate : '#gb_shipping_zone_text',
});
});
不幸的是我没有写这个,而且我对JavaScript很不熟悉,所以任何帮助都会非常感激!
哦,还有一件事,我在试图找出正在发生的事情时发现: 在提交和更新税后查看页面来源时,html显示正确的状态为&#34;选择&#34;,即使阿拉斯加正在显示:
<option value="WA" selected='selected'>Washington</option>
编辑:这里是一些使用上述JavaScript的相关PHP代码:
<?php
/**
* Function is activated by the gb_valid_process_payment_page filter
*
* @param type $verify
* @param Group_Buying_Checkouts $checkout
* @return type
*/
function gbsstates_capture_state( $verify, Group_Buying_Checkouts $checkout )
{
// set billing state
$zone = isset($_POST['gb_billing_zone_text']) &&$_POST['gb_billing_zone_text']
?$_POST['gb_billing_zone_text']
:(isset($_POST['gb_billing_zone'])?$_POST['gb_billing_zone']
:$checkout->cache['billing']['zone']);
$checkout->cache['billing']['zone'] = $zone;
// set shipping state
$zone = isset($_POST['gb_shipping_zone_text']) &&$_POST['gb_shipping_zone_text']
?$_POST['gb_shipping_zone_text']
:(isset($_POST['gb_shipping_zone'])?$_POST['gb_shipping_zone']
:$checkout->cache['shipping']['zone']);
$checkout->cache['shipping']['zone'] = $zone;
// pass through the verify boolean
return $verify;
}
/**
* fired on gb_checkout_fields_billing action. it adds an additional hidden
* field to the array
*
* @param type $fields
* @return array()
*/
function gbsstates_add_textfield_zone( $fields = array() )
{
$fields['zone_text'] = array(
'weight' => 13,
'label' => __( 'State' ),
'type' => 'text'
);
return $fields;
}
/**
* Function upgrades the fields array
*
* @param type $states
*/
function gbsstates_set_checkout_fields_array( $states = array(), $args = array() ){
wp_enqueue_script(
'gbsstates',
plugins_url( '/js/states.js' , __DIR__ ),
array( 'jquery' )
);
wp_enqueue_script(
'chosen',
plugins_url( '/js/chosen.jquery.min.js' , __DIR__ ),
array( 'gbsstates' )
);
wp_enqueue_style(
'chosen',
plugins_url( '/css/chosen.css' , __DIR__ )
);
$states = gbsstates_statearray_minimal();
if ( isset( $args['include_option_none'] ) && $args['include_option_none'] ) {
$states = array( '' => array('' => $args['include_option_none'] ))
+ $states;
}
return $states;
}
/**
* This function returns an array of states
*
* @return array()
*/
function gbsstates_statearray_minimal() {
return array(
'US' => array(
'AK' => 'Alaska',
'AL' => 'Alabama',
'AR' => 'Arkansas',
'AZ' => 'Arizona',
'CA' => 'California',
'CO' => 'Colorado',
'CT' => 'Connecticut',
'DC' => 'District Of Columbia',
'DE' => 'Delaware',
'FL' => 'Florida',
'GA' => 'Georgia',
'HI' => 'Hawaii',
'IA' => 'Iowa',
'ID' => 'Idaho',
'IL' => 'Illinois',
'IN' => 'Indiana',
'KS' => 'Kansas',
'KY' => 'Kentucky',
'LA' => 'Louisiana',
'MA' => 'Massachusetts',
'MD' => 'Maryland',
'ME' => 'Maine',
'MI' => 'Michigan',
'MN' => 'Minnesota',
'MO' => 'Missouri',
'MS' => 'Mississippi',
'MT' => 'Montana',
'NC' => 'North Carolina',
'ND' => 'North Dakota',
'NE' => 'Nebraska',
'NH' => 'New Hampshire',
'NJ' => 'New Jersey',
'NM' => 'New Mexico',
'NV' => 'Nevada',
'NY' => 'New York',
'OH' => 'Ohio',
'OK' => 'Oklahoma',
'OR' => 'Oregon',
'PA' => 'Pennsylvania',
'RI' => 'Rhode Island',
'SC' => 'South Carolina',
'SD' => 'South Dakota',
'TN' => 'Tennessee',
'TX' => 'Texas',
'UT' => 'Utah',
'VA' => 'Virginia',
'VT' => 'Vermont',
'WA' => 'Washington',
'WI' => 'Wisconsin',
'WV' => 'West Virginia',
'WY' => 'Wyoming'
)
);
}
答案 0 :(得分:0)
当您重新加载页面时,所有表格都清晰正常。有两种解决方案。
保存输入 您可以使用localstorage在页面重新加载之前保存输入值,而不是检查localstorage变量是否存在,以及是否将默认状态更改为该状态。
不要重装 您也可以(如果您的计算在JS中完成)在值更改时重新计算价格。然后你可以使用jquery来改变显示的价格。这是迄今为止最简单,最有效的方式。它也提供了更好的用户体验,因为没有延迟。