时间戳

首页 > 解决方案 > 将单选按钮更改为下拉菜单

javascript - 将单选按钮更改为下拉菜单

问题描述

我正在尝试使用 css 将单选按钮更改为下拉菜单。该网站是建立在 wordpress 上的，但是是否可以仅使用 css 将单选按钮更改为下拉菜单，或者我是否需要在某处添加 javascript？

所以我的最终游戏是将“交付”单选按钮更改为下拉菜单。他们有自己的班级。

当我搜索时，它会不断返回此代码。我在这里遗漏了什么，还是我应该忘记下拉菜单？

<div class="wcsatt-options-wrapper" <?php echo count( $options ) === 1 ? 'style="display:none;"' : '' ?>><?php

if ( $prompt ) {
    echo $prompt;
} else {
    ?><h3><?php
        _e( 'Choose a subscription plan:', 'woocommerce-subscribe-all-the-things' );
    ?></h3><?php
}

?><ul class="wcsatt-options-product"><?php
    foreach ( $options as $option ) {
        ?><li class="<?php echo esc_attr( $option[ 'class' ] ); ?>">
            <label>
                <input type="radio" name="convert_to_sub_<?php echo absint( $product_id ); ?>" data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>" value="<?php echo esc_attr( $option[ 'value' ] ); ?>" <?php checked( $option[ 'selected' ], true, true ); ?> />
                <?php echo '<span class="' . esc_attr( $option[ 'class' ] ) . '-details">' . $option[ 'description' ] . '</span>'; ?>
            </label>
        </li><?php
    }
?></ul>

标签： javascriptphpwoocommerce

解决方案

尝试用以下代码替换“ul”标签。

<select class="anyting-you-wish" name="convert_to_sub_<?php echo absint( $product_id ); ?>">
    <?php foreach ( $options as $option ) { ?>
        $selected = ($option[ 'selected' ] == true ? 'selected="selected"' : null);
        <option data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>" value="<?php echo esc_attr( $option[ 'value' ] ); ?>" <?php echo($selected); ?> >
            <?php echo($option[ 'description' ]); ?>
        </option>
    <?php } ?>
</select>

请让我知道这是否有效。

推荐阅读