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

如果选项和链接不在同一个字段集中，我不确定这是否可行？单击链接时更改选项表单元素的值

我有一张网格图片和一个产品可用的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>

来源

2012-10-18 Francesca

是jQuery的一个选项，还是这需要在普通的JavaScript？ – j08691

两者都很好。我的购物车系统无论如何都使用javascript，所以我很乐意使用任何东西。如果有一个CSS版本会很棒，因为我觉得它更清洁一些，但我知道它可能比它的价值更麻烦。 – Francesca

@Francesca，你的问题的解决方案需要一些编程，所以JS/jQuery IS *需要*。此外，我会更改标记，以便名称与图像相关，并且也包含在锚点中。 – Marko

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

来源

2012-10-18 23:01:45 j08691

谢谢，这很简单，效果很好。 – Francesca

除了可怜的标记之外，文件名必须与值匹配，并且名称不可点击。哈克解决方案，如果你问我:) – Marko

您必须使用的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-18 22:53:41 Ibu

这里有一个更新的小提琴改进标记和你需要的功能。

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-18 23:04:11 Marko

我所花费的时间来适应的代码为您的网站，只贴上里面的下面的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-18 23:16:52 Nelson

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

回答

相关问题