如何在select2中添加占位符答案

【问题标题】：How to add placeholder in select2如何在select2中添加占位符
【发布时间】：2020-10-26 14:07:07
【问题描述】：

这是我动态生成下拉列表的 php jquery 代码。

它工作正常。但我必须在此下拉列表中添加 placeHolder。

所以我添加了下面的代码，但它不起作用。

我可以知道我应该在哪里添加此代码或我的代码有问题吗？

$('#calc_shipping_state').one('select2:open', function(e) {
                        $('input.select2-search__field').prop('placeholder', 'enter username or city');
                    });

问候，亚历克斯

<?php
    /** 
     * Added state filter for shipping calculater
     */ 
        if ( 'yes' === get_option( 'wc_csz_new_state_field' ) && in_array( WC()->countries->get_base_country(), get_option( 'wc_csz_countries_codes' ) ) ) {
            $country_states = [];
            include( WP_PLUGIN_DIR . '/cities-shipping-zones-for-woocommerce/i18n/cities/' . WC()->countries->get_base_country() . '.php' );
            woocommerce_form_field( 'calc_shipping_new_state', [
                'type'  => 'select',
                'options'   => [ '' => '' ] + apply_filters( 'csz_states', $country_states ),
                'class'     => [ 'form-row-wide', 'address-field' ]
            ] );
            ?>
                <script type="text/javascript">
                jQuery( function( $ ) {
                    var country = '<?php echo WC()->countries->get_base_country(); ?>';
                    $( document ).ready( function() { new_state_visibility() } );
                    
                    
                    function new_state_visibility() {
                        if ( $( '#calc_shipping_country option:selected' ).val() == country || $( '#calc_shipping_country' ).val() == country ) {
                            $( '#calc_shipping_new_state_field' ).show();
                        } else {
                            $( '#calc_shipping_new_state_field' ).hide();
                        }
                    };
                    
                    $( '#calc_shipping_state' ).on( 'select2:open', function() {
                        $('.select2-search__field').attr('placeholder', 'your placeholder');
                        });
                        if ( $( '#calc_shipping_country option:selected' ).val() == country || $( '#calc_shipping_country' ).val() == country ) {
                            $( '#calc_shipping_state' ).data( 'select2' ).dropdown.$search.val( $( '#calc_shipping_new_state option:selected' ).text() + ' - ' );
                            $( '#calc_shipping_state' ).data( 'select2' ).dropdown.$search.trigger( 'input' );
                            $( '#calc_shipping_state' ).trigger( 'query', { term } );
                        }
                    } );
                    $( '#calc_shipping_state' ).on( 'select2:select', function() {
                        $( '#calc_shipping_new_state option' ).filter( function() { return $( this ).text() == $( '#calc_shipping_state option:selected' ).text().split( ' - ' )[0]; } ).prop( 'selected', true );
                    } );

                    $('#calc_shipping_state').one('select2:open', function(e) {
                        $('input.select2-search__field').prop('placeholder', 'enter username or city');
                    });
    
                } );
                </script>
            <?php
        }
    ?>

【问题讨论】：

您可以轻松添加第三方 'select2' 脚本来做到这一点。
documentation 没有帮助？
@Tuhin 为什么第三方代码比 Select2 提供的占位符选项更好？如果没有任何类型的链接或指南，像“您可以轻松添加”这样的 cmets 也很少有用。

标签： php jquery jquery-select2

【解决方案1】：

我不太确定，但我认为它与 data-placeholder 属性有关，所以是这样的 data-placeholder="Placeholder" 您可以阅读有关占位符here的文档

【讨论】：

【解决方案2】：

这就是答案。

woocommerce_form_field( 'calc_shipping_new_state', [
            'type'  => 'select',
            'options'   => [ '' => '' ] + apply_filters( 'csz_states', $country_states ),
            'class'     => [ 'form-row-wide', 'address-field' ]
            'placeholder' => 'State / County',
        ] );

【讨论】：