php - 像谷歌翻译一样做出选择

Question

我正在尝试像快照一样进行选择，但我做不到，然后用 php 接收一个值，我需要选择只出现一个图像，但点击出现图像和图像右侧的小描述侧，当单击选项关闭菜单并将图像更改为选中时，但允许再次更改它(谷歌不允许更改，请在添加的图片或此处查看我需要的示例:Google Translate(在 Chrome 上制作快照)。

我需要它通过 php 脚本接收数据。 我正在尝试，但我做不到，请帮助我，在此先感谢(抱歉我的英语不好)。

Answer 1

那不是真正的 <select>它是一张图片，当你点击它时，它会显示一个 <div>那是以前隐藏的。当您单击其中一个评级图标时，它会更改图片和工具提示文本并发送 AJAX 请求以存储您的评级。

除了发送 AJAX 请求之外，您还可以更改隐藏字段中的值，这在某种程度上类似于 <select>。 .

一些伪HTML/JS代码

<input type="hidden" name="myField" id="myField" />
<img src="unselected.png" onClick="document.getElementById('selectDiv').style.visibility = 'visible'" id="image" />
<div style="visibility: hidden" id="selectDiv">
<ul>
  <li><a href="#" onclick="document.getElementById('image').src = 'option1.png'; document.getElementById('myField').value = 'option1'">Option 1</li>
  <li><a href="#" onclick="document.getElementById('image').src = 'option2.png'; document.getElementById('myField').value = 'option2'">Option 2</li>
  <li><a href="#" onclick="document.getElementById('image').src = 'option2.png'; document.getElementById('myField').value = 'option3'">Option 3</li>
</ul>
</div>

只是又快又脏。您需要移动 div 以使其显示在图像下方和一些样式等...但这就是其背后的总体思路