Woocommerce结帐-多选下拉菜单

Question

我设法在结帐页面上添加了自定义多重选择，但是我试图通过创建多重选择下拉列表来实现更好的ui。 意味着用户可以打开选择字段并选择一个选项，然后再次打开它并选择另一个选项。

与此类似：

https://user-images.githubusercontent.com/5323259/26870726-320d474c-4b71-11e7-8000-4f019147db20.png

这是我使用的代码：

add_filter( 'woocommerce_checkout_fields' , 'custom_checkout_fields', 30, 1 );
function custom_checkout_fields ( $fields ) {
    $domain = 'woocommerce';

    $fields['billing']['multi_my_field'] = array(
        'label'        => __('My Field', 'woocommerce'),
        'required'     => true,
        'class'        => array('form-row-wide'),
        'clear'        => true,
        'autocomplete' => false,
        'type'         => 'select',
        'options'      => array(
            'key1'  => __('First Item', $domain),
            'key2'  => __('Second Item', $domain),
            'key3'  => __('Third Item', $domain),
            'key4'  => __('Fourth Item', $domain),
        ),
    );
    ?>
    <input type="hidden"  name="billing_my_field" id="billing_my_field" value="0">
    <script type='text/javascript'>
        jQuery(function($){
            var a = 'select[name="multi_my_field"]',
                b = 'input[name="billing_my_field"]';
            $(a).attr('multiple', 'multiple');
            $(a).change( function(){
                $(b).val($(this).val());
            })
        });
    </script>
    <?php
    return $fields;
}

add_action( 'woocommerce_checkout_update_order_meta', 'hidden_checkout_field_update_order_meta', 30, 1 );
function hidden_checkout_field_update_order_meta ( $order_id ) {
    if( isset( $_POST['billing_my_field'] ) )
        update_post_meta($order_id, '_billing_my_field', esc_attr( $_POST['billing_my_field'] ) );
}