Question

我希望用图片替换选择的下拉列表。

我目前的下拉代码是

<div class="app_services_dropdown_select">
  <select name="app_select_services" class="app_select_services">
  <option value="1" selected="selected">Class IV MOT (Up to 3,000KG)</option>
  <option value="2">Class VII MOT (3,000KG - 3,500KG)</option></select>
  <input type="button" class="app_services_button" value="Show available times">
</div>

此代码生成的内容：

$s .= '<div class="app_services">';
$s .= '<div class="app_services_dropdown">';
$s .= '<div class="app_services_dropdown_title">';
$s .= $select;
$s .= '</div>';
$s .= '<div class="app_services_dropdown_select">';
$s .= '<select name="app_select_services" class="app_select_services">';
    if ( $services ) {
        foreach ( $services as $service ) {
            $service_description = '';
            // Check if this is the first service, so it would be displayed by default
            if ( $service->ID == $appointments->service ) {
                $d = '';
                $sel = ' selected="selected"';
            }
            else {
                $d = ' style="display:none"';
                $sel = '';
            }
            // Add options
$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
        }
    }
    $s .= '</select>';
    $s .= '<input type="button" class="app_services_button" value="'.$show.'">';
    $s .= '</div>';
    $s .= '</div>';

我真的想要一辆汽车的价值为1，货车的价值为2，而且我真的希望它能通过点击提交而不是按钮。

是否可以用图像替换下拉列表，还是需要使用单选按钮，然后使用图像设置样式？

您可以在使用中查看我当前的下拉列表here

Answer 1

有各种插件可以帮助您实现目标。我用Google搜索，发现很少有人可以试试

Answer 2

有一个链接可以通过Javascript触发div的显示。

此div将包含两个链接图像，以及您希望用户访问的链接。

此div也需要与触发它的初始链接相对放置。

如果您不想自己编制下拉菜单，可以使用bootstrap或jquery-ui

等库

用图像替换选择下拉列表

2 个答案: