0

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

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

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

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

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

JS小提琴

实时站点示例

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

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

4 回答 4

2

你可以像这个jsFiddle 示例（使用 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);
    });
});​
于 2012-10-18T23:01:45.100 回答
0

您必须使用 selectedIndex 来修改当前选择的选项：

<a href="#" onClick="document.getElementById('action').selectedIndex=0">Add</a>
<a href="#" onClick="document.getElementById('action').selectedIndex=1">Add</a>

如果您可以避免内联javascript，它会更干净：

的HTML：

添加删除

添加删除

然后你的脚本：

window.onload = function (){ // make sure the content is loaded
   var addBtn = document.getElementById("addBtn");
   var delBtn = document.getElementById("deleteBtn");
   var selTag = document.getElementById("action");

   addBtn.onclick = function () {
       selTag.selectedIndex = 0;
       return false;
   }
   delBtn.onclick = function () {
       selTag.selectedIndex = 1;
       return false;
   }
}
于 2012-10-18T22:53:41.743 回答
0

这是一个更新的小提琴，改进了标记和您需要的功能。

http://jsfiddle.net/fm6jG/5/

标记

<div id="colourList">
    <a href="#">
        <img src="" />
        <span>Red</span>
    </a>
    <a href="#">
        <img src="" />
        <span>Seaholly</span>
    </a>
    <a href="#">
        <img src="" />
        <span>Earth</span>
    </a>
    <a href="#">
        <img src="" />
        <span>Sage</span>
    </a>
</div>
<form>
    <label>Choose colour:</label><br />
    <select class="item_colour">
    <option value="Red">Red</option>
    <option value="Seaholly">Seaholly</option>
    <option value="Sage">Sage</option>
    <option value="Earth">Earth</option>
    <option value="Spice">Spice</option>
    <option value="Jet">Jet</option>
    <option value="Tarmac">Tarmac</option>
    <option value="Denim">Denim</option>
    <option value="Cream">Cream</option>
    <option value="Parchment">Parchment</option>
    <option value="Teal">Teal</option>
    <option value="Damson">Damson</option>
    <option value="Moorland">Moorland</option>
    <option value="Forest">Forest</option>
    <option value="Amethyst">Amethyst</option>
    <option value="Burgundy">Burgundy</option>
    </select>
</form>

jQuery

var $itemColourList = $(".item_colour");
$("#colourList a").click(function(e) {
    e.preventDefault();
    var colourName = $(this).children("span").text();
    $itemColourList.val(colourName);
});​
于 2012-10-18T23:04:11.833 回答
0

我已经花时间为您的网站调整代码，只需将以下 javascript 粘贴到<body>您的网站中：

<script type="text/javascript">
$(document).ready(function() {
   $('#colourList img').wrap('<a href="javascript:void(0)" class="imgcolor" />');
   $('.imgcolor').bind('click', function(e) {
      e.preventdefault();
      ind = $(this).parent().parent().index();
      tx = $(this).parent().parent().parent().next().find('td:eq('+ind+')').text();
      ind = $(".item_colour option[value='"+tx+"']").index();
      $(".item_colour").selectedIndex = ind;
   });
});
</script>

这应该可以满足您的需求，它还将您的所有图像包装在<a>元素中，以便它们显示为可点击。它从表格单元格中检索颜色名称，而不是作为其他解决方案的文件名。

于 2012-10-18T23:16:52.540 回答