Javascript 将选择下拉列表替换为图像

我希望用图像替换选择下拉列表

我当前的下拉列表代码是

<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>

四级机动车辆（不超过3000千克）
第七类机动车辆（3000kg-3500kg）

这是由以下代码生成的：

$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>';

$s.=''；
$s.=''；
$s.=''；
$s.=$select；
$s.=''；
$s.=''；
$s.=''；
if（服务费）{
foreach（$services as$service）{
$service_description=''；
//检查这是否是第一个服务，以便在默认情况下显示它
如果（$service->ID==$appoints->service）{
$d=''；
$sel='selected=“selected”'；
}
否则{
$d='style=“display:none”'；
$sel=''；
}
//添加选项
$s.=''.stripslashes（$service->name）。''；
}
}
$s.=''；
$s.=''；
$s.=''；
$s.=''；

我真的想要一个值为1的汽车和值为2的货车的图像，而且我真的想要它在点击时提交，而不是有按钮

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

---

您可以看到我当前正在使用的下拉列表

中有一个链接，可以使用Javascript触发div的幻影

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

该div还需要与触发它的初始链接相对放置

---

如果您不想自己编写下拉列表，可以使用或之类的库。有各种插件可供使用，它们可以帮助您实现目标。我在谷歌上搜索了一下，发现很少有人可以试试

---

使ajax调用的图像上的单击处理程序并不复杂。你的具体问题是什么？你试过什么？这个网站不是一个UX概念的试探板，它是为真正的代码相关的问题。这个问题实在太宽泛了。@charlietfl-我的具体问题是，是否可以用图片替换我的下拉列表，或者我是否需要使用单选按钮等等。。。我不是问人们认为哪一个是最好的方法。对不起，我的问题没有具体说明。我会改写它，如果我能像收音机一样，只有当这是一个更大的形式的一部分时，我才会真正需要它。可以轻松地在包装图像和覆盖收音机的标签内使用它们<代码>带有内置收音机（或

用于

）会自动将事件传输到收音机。否则，在一个绑定到我刚才看到的任何类型的元素的点击处理程序中发送ajax是很简单的，但看起来他们只是在下拉列表中添加图像。我错过了什么吗？老实说，我甚至不是100%清楚你想要什么用户界面。演示之前/之后会有所帮助。使用jsfiddle.net或其他代码共享站点嗨，谢谢这些，我已经检查过了，这些似乎只是将图像添加到下拉列表中，而不是替换下拉列表。真的不知道这是如何回答问题的。你的建议一点也不清楚