Question

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

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

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

我试图在JS小提琴中复制我的代码，道歉它不是很清楚。我把“海冬青”作为一个例子（所有其他图像都是本地的）

是否可以通过CSS实现这一目标？

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

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

Answer 1

你可以这样做 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);
    });
});

Answer 2

您必须使用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;
   }
}

Answer 3

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

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);
});

Answer 4

我已花时间调整您网站的代码，只需将以下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>元素中，使它们看起来像是可点击的。它从Table单元格中检索颜色名称，而不是从另一个解决方案中检索文件名。

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

4 个答案: