Как заменить радиокнопки на выпадающий список?

Question

[ligisayan]

Есть интернет-магазин с различными формами оплаты. Созрела необходимость заменить выбор конструкции ul-li-input[type="radio"] на select-option (если заменяю класс class="input-radio" на class="input-radio payment_method_<?php echo $gateway->id; ?>" - выводится селект с пустыми полями)

/* исходный код */
<ul class="payment_methods methods">
  if ( ! empty( $available_gateways ) ) { foreach ( $available_gateways as $gateway ) {
  <li class="payment_method_<?php echo $gateway->id; ?>">
    <input id="payment_method_<?php echo $gateway->id; ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="
    <?php echo esc_attr( $gateway->order_button_text ); ?>" />
    <label for="payment_method_<?php echo $gateway->id; ?>">
      <?php echo $gateway->get_title(); ?>
      <?php echo $gateway->get_icon(); ?>
    </label>
  </li>
  }
</ul>

/* меняем на селект */
<select class="payment_methods methods">
  if ( ! empty( $available_gateways ) ) { foreach ( $available_gateways as $gateway ) {
  <option id="payment_method_<?php echo $gateway->id; ?>" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" selected="<?php ( $gateway->chosen, true ); ?>" data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>">
    <?php echo $gateway->get_title();?></option>
  }
</select>

но, при проверке

$available_gateways = 
WC()->payment_gateways->get_available_payment_gateways();
if ( ! isset( $available_gateways[ $this->posted['payment_method'] ] ) ) {
$this->payment_method = '';
wc_add_notice( __( 'Invalid payment method.', 'woocommerce' ), 'error' );
}

получаю ошибку неверный способ оплаты, причем если посмотреть, что выводится с помощью var_dump($available_gateways);, то получаю ошибку другого рода undefind symbol a Что можете посоветовать?

Answer 1

[Igor Makarov]

Атрибут "name" следует указывать для элемента "select", а не для "option"

<select class="payment_methods methods" name="payment_method">
    <option value="">Something</option>
    <option value="">Other thing</option>
    ...
</select>

Comments

[ligisayan]

Igor Makarov отлично! все способы работают за исключением самого главного - необходимо еще разобраться, как правильно заменить проверки:

.find( 'input[name=payment_method]:checked' ).click()
this.$order_review.on( 'click', 'input[name=payment_method]', this.payment_method_selected );
$( '.woocommerce-checkout' ).find( 'input[name=payment_method]:eq(0)' ).attr( 'checked', 'checked' );
$( '.woocommerce-checkout' ).find( 'input[name=payment_method]:checked' ).eq(0).trigger( 'click' );

[Igor Makarov]

ligisayan: давайте попробуем :) Немного непонятна вырезка кода, какие то странные вызовы событий, и для чего, лучше увидеть его целиком.

Получится примерно следующее:

.find( 'select[name=payment_method]' ).change()
this.$order_review.on( 'change', 'select[name=payment_method]', this.payment_method_selected );
// удалить обе строки ниже, по умолчанию select установлен в первую опцию
$( '.woocommerce-checkout' ).find( 'input[name=payment_method]:eq(0)' ).attr( 'checked', 'checked' );
$( '.woocommerce-checkout' ).find( 'input[name=payment_method]:checked' ).eq(0).trigger( 'click' );