css - 单击链接时更改选项表单元素的值

标签 css onclick option

如果选项和链接不在同一个字段集中,我不确定这是否可能?

我有一个网格,上面有一个产品可用的 16 种色调的图片和名称。我还有一个带有颜色名称的“选择颜色”选项列表。

我希望名称链接到颜色,因此当您单击表格中一种颜色的图像时,它会将选项更改为适当的值。

我试图在 JS Fiddle 中复制我的代码,抱歉,它不是很清楚。我已将“海冬青”作为示例图像(所有其他图像都是本地镜像)

是否可以仅使用 CSS 来实现这一点?

JS Fiddle

Live site example

我找到了以下代码,但我很难让它工作,也许这不是我在这种情况下需要的?

<form>
      <select id="action">
         <option value="a">Add</option>
         <option value="b">Delete</option>
      </select>
 </form>

<a href="#" onClick="document.getElementById('action').value='a'">Add</a> 
<a href="#" onClick="document.getElementById('action').value='b'">Delete</a> 

最佳答案

你可以这样做 jsFiddle example (使用 jQuery)。

$('img').click(function() {
    var item = $(this).attr('src').split('/').pop().split('.')[0];
    $('select.item_colour option').each(function() {
        if ($(this).val().toLowerCase() == item) $(this).prop('selected', true);
    });
});​

关于css - 单击链接时更改选项表单元素的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12964942/

相关文章:

jquery - 如何重新计算期权:首次计算后更改期权时选择?

jquery - 如何为数据表搜索栏创建特定的 html 结构?

javascript - 如何让一个 div 随着窗口大小的调整而移动,而不会将其他 div 推开?

html - 如果空间足够则设置边距

php - onclick 数据到 JavaScript

linux - bash中的“for option”和bash中的echo

带有普通按钮的 CSS 下拉菜单

javascript - 将 img src 插入输入 onClick

javascript - 根据链接点击更改 div 内容

jQuery 选择的选项仅在调试中工作