Javascript 如何向WooCommerce签出页面中的自定义选择框添加验证并应用select2样式。

我在Woocomccerce结帐页面上添加了几个选择框，除了两件我不确定的事情外，一切正常

验证并应用与页面上其他选择框相同的样式

我知道的事情

• WooCommerce正在使用旧的select2库

• 当我将下面的脚本添加到我的子主题.js文件时 “签出”页面上的“选择”框正确，但会打断网站上的所有其他“选择”框，而不管加载my.js文件的顺序如何。 开始，中间，最后。 jQuery（document）.ready（函数（）{jQuery（.select”）.select2（）；}）；//结束文件准备就绪`

**下面是我正在应用于functions.php的代码。如果您有任何帮助，我们将不胜感激。**

function  cstm_scripts_with_jquery()
{

    // Register the script like this for a theme:
    wp_register_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.js'  );

    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'scripts' );
}
add_action( 'wp_enqueue_scripts', 'cstm_scripts_with_jquery' );

add_action('woocommerce_before_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {

echo '<div id="my_custom_checkout_field"><h2>'.__('A few quick questions.').'</h2>';

woocommerce_form_field( 'quantity', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Quantity?'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Standard Size' => __('Standard Size', 'woocommerce' ),
'Other'         => __('Other', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'quantity' ));

woocommerce_form_field( 'potannusge', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Potential Annual Usage?'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Less than 100k' => __('Less than 100kg', 'woocommerce' ),
'100 kg - 500 kg' => __('100 kg - 500 kg', 'woocommerce' ),
'500 kg - 1000 kg' => __('500 kg - 1000 kg', 'woocommerce' ),
'Greater than 1000 kg'          => __('Greater than 1000 kg', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'potannusge' ));

woocommerce_form_field( 'proapp', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Project / Application:'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Pet'           => __('Pet', 'woocommerce' ),
'Skin Care'     => __('Skin Care', 'woocommerce' ),
'Food'          => __('Food', 'woocommerce' ),
'Dietary Supplement' => __('Dietary Supplement', 'woocommerce' ),
'Other'         => __('Other', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'proapp' ));

woocommerce_form_field( 'protype', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Project Type:'),
'placeholder'   => __('Enter something'),
'options'       => array(
'New'           => __('New', 'woocommerce' ),
'Enhancement'   => __('Enhancement', 'woocommerce' ),
'Other'         => __('Other', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'protype' ));

woocommerce_form_field( 'prolength', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Project Length:'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Immediate Need' => __('Immediate Need', 'woocommerce' ),
'0-6 Months'     => __('0-6 Months', 'woocommerce' ),
'6-12 Months'    => __('6-12 Months', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'prolength' ));

woocommerce_form_field( 'decismakr', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Decision Maker Role:'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Purchaser'     => __('Purchaser', 'woocommerce' ),
'Formulator only' => __('Formulator only', 'woocommerce' ),
'Consultant'        => __('Consultant', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'decismakr' ));

echo '</div>';

}

/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
global $woocommerce;

// Check if set, if its not set add an error.
if (!$_POST['quantity'])
$woocommerce->add_error( __('Please select an answer. ') );
}
/**
 * Update the user meta with field value
 **/
add_action('woocommerce_checkout_update_user_meta', 'my_custom_checkout_field_update_user_meta');
function my_custom_checkout_field_update_user_meta( $user_id ) {
    if ($user_id && $_POST['quantity']) update_user_meta( $user_id, 'quantity', esc_attr($_POST['quantity']) );
    if ($user_id && $_POST['potannusge']) update_user_meta( $user_id, 'potannusge', esc_attr($_POST['potannusge']) );
    if ($user_id && $_POST['proapp']) update_user_meta( $user_id, 'proapp', esc_attr($_POST['proapp']) );
    if ($user_id && $_POST['protype']) update_user_meta( $user_id, 'protype', esc_attr($_POST['protype']) );
    if ($user_id && $_POST['prolength']) update_user_meta( $user_id, 'prolength', esc_attr($_POST['prolength']) );
    if ($user_id && $_POST['decismakr']) update_user_meta( $user_id, 'decismakr', esc_attr($_POST['decismakr']) );


}
/**
* Update the order meta with field value
**/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

function my_custom_checkout_field_update_order_meta( $order_id ) {
if ($_POST['quantity']) update_post_meta( $order_id, 'Quantity', esc_attr($_POST['quantity']));
if ($_POST['potannusge']) update_post_meta( $order_id, 'Potential Annual Usage', esc_attr($_POST['potannusge']));
if ($_POST['proapp']) update_post_meta( $order_id, 'Project Application', esc_attr($_POST['proapp']));
if ($_POST['protype']) update_post_meta( $order_id, 'Project Type', esc_attr($_POST['protype']));
if ($_POST['prolength']) update_post_meta( $order_id, 'Project Length', esc_attr($_POST['prolength']));
if ($_POST['decismakr']) update_post_meta( $order_id, 'Decision Maker', esc_attr($_POST['decismakr']));

}

/**
* Add the field to order emails
**/
add_filter('woocommerce_email_order_meta_keys', 'my_custom_checkout_field_order_meta_keys');

function my_custom_checkout_field_order_meta_keys( $keys ) {
$keys[] = 'Quantity';
$keys[] = 'Potential Annual Usage';
$keys[] = 'Project Application';
$keys[] = 'Project Type';
$keys[] = 'Project Length';
$keys[] = 'Decision Maker';
return $keys;
}`

带有jquery（）的函数cstm\u脚本
{
//按如下方式为主题注册脚本：
wp_register_script（'scripts'，get_stylesheet_directory_uri（）。/js/scripts.js'）；
//对于插件或主题，您可以将脚本排队：
wp_排队_脚本（“脚本”）；
}
添加动作（'wp_enqueue_scripts'、'cstm_scripts_with_jquery'）；
添加操作（“订单注释前的WOOMerce”字段、“我的自定义签出”字段）；
函数my_custom_checkout_字段（$checkout）{
回音“.u uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu；
表单字段（'quantity'，数组）(
'类型'=>'选择'，
“必需”=>true，
'class'=>array（'form-row-wide'），
“标签”=>（数量？），
“占位符”=>“‘输入某物’”，
“选项”=>数组(
“标准尺寸”=>，
'Other'=>\（'Other'，'woocommerce'）
)//期权结束
)，$checkout->get_值（'quantity'）；
woocommerce_表单_字段（'Potanusge'，数组(
'类型'=>'选择'，
“必需”=>true，
'class'=>array（'form-row-wide'），
“标签”=>（潜在年使用量？），
“占位符”=>“‘输入某物’”，
“选项”=>数组(
“小于100k”=>“‘小于100kg’，‘woocommerce’”，
“100公斤-500公斤”=>“‘100公斤-500公斤’，‘woocommerce’”，
“500公斤-1000公斤”=>“‘500公斤-1000公斤’，‘woocommerce’”，
“大于1000公斤”=>“‘大于1000公斤’、‘woocommerce’）
)//期权结束
)，$checkout->get_value（'potanusge'）；
表单字段（'proapp'，数组(
'类型'=>'选择'，
“必需”=>true，
'class'=>array（'form-row-wide'），
“label'=>”（项目/应用程序：），
“占位符”=>“‘输入某物’”，
“选项”=>数组(
“宠物”=>“‘宠物’、‘woocommerce’”，
“皮肤护理”=>“‘皮肤护理’、‘woocommerce’”，
“食品”=>“‘食品’、‘商业’”，
“膳食补充剂”=>“‘膳食补充剂’、‘woocommerce’”，
'Other'=>\（'Other'，'woocommerce'）
)//期权结束
)，$checkout->get_value（'proapp'）；
表单字段（'protype'，数组(
'类型'=>'选择'，
“必需”=>true，
'class'=>array（'form-row-wide'），
“label'=>”（项目类型：），
“占位符”=>“‘输入某物’”，
“选项”=>数组(
“新建”=>“‘新建’、‘woocommerce’”，
“增强”=>“‘增强’、‘woocommerce’”，
'Other'=>\（'Other'，'woocommerce'）
)//期权结束
)，$checkout->get_值（'protype'）；
格式字段（'prolength'，数组(
'类型'=>'选择'，
“必需”=>true，
'class'=>array（'form-row-wide'），
“label'=>”（项目长度：），
“占位符”=>“‘输入某物’”，
“选项”=>数组(
“即时需要”=>“‘即时需要’、‘商业’”，
“0-6个月”=>“‘0-6个月’，‘woocommerce’”，
“6-12个月”=>（6-12个月，woocommerce）
)//期权结束
)，$checkout->get_值（'prolength'）；
字段（'decismakr'，数组(
'类型'=>'选择'，
“必需”=>true，
'class'=>array（'form-row-wide'），
“标签”=>“（“决策者角色：”），
“占位符”=>“‘输入某物’”，
“选项”=>数组(
“买方”=>“‘买方’、‘woocommerce’”，
“仅限配方设计师”=>“‘仅限配方设计师’、‘woocommerce’”，
“顾问”=>\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
)//期权结束
)，$checkout->get_值（'decismakr'）；
回声'；
}
/**
*处理结帐
**/
添加_操作（'woocmerce_checkout_process'、'my_custom_checkout_field_process'）；
函数my\u custom\u checkout\u field\u process（）{
全球商业；
//检查是否已设置，如果未设置，则添加错误。
如果（！$_POST['quantity']）
$woocommerce->add_错误（uuu（'请选择答案'））；
}
/**
*使用字段值更新用户元
**/
添加操作（'woocommerce\u checkout\u update\u user\u meta'、'my\u custom\u checkout\u field\u update\u user\u meta'）；
函数my\u custom\u checkout\u field\u update\u user\u meta（$user\u id）{
如果（$user_id&$$u POST['quantity']）更新用户元（$user_id，'quantity'，esc_attr（$u POST['quantity']）；
如果（$user_id&$$u POST['potanusge']）更新用户元（$user_id，'potanusge'，esc_attr（$u POST['potanusge']）；
如果（$user\u id&$\u POST['proapp']）更新用户元（$user\u id，'proapp'，esc\u attr（$\u POST['proapp']）；
如果（$user_id&$$u POST['protype']）更新用户元（$user_id，'protype'，esc_attr（$u POST['protype']）；
如果（$user\u id&$\u POST['prolength']）更新用户元（$user\u id，'prolength'，esc\u attr（$u POST['prolength']）；
如果（$user_id&$$u POST['decismakr']）更新用户元（$user_id，'decismakr'，esc_attr（$u POST['decismakr']）；
}
/**
*使用字段值更新订单元
**/
添加操作（'woocommerce\u checkout\u update\u order\u meta'、'my\u custom\u checkout\u field\u update\u order\u meta'）；
函数my\u custom\u checkout\u field\u update\u order\u meta（$order\u id）{
如果（$发布['quantity']）更新发布元（$订单id，'quantity'，esc\u属性（$发布['quantity']）；
如果（$邮政['potan
'input_class'   => array('my-select'),

jQuery('.my-select').select2();