如何触发图片上的下拉更改事件点击

我有一个下拉框，它更新了表单中的描述字段。现在我已经将下拉转换为图像&想要图像点击相同的功能。下拉菜单将隐藏在窗体中。如何触发图片上的下拉更改事件点击

所以当有人点击图像时，我想触发后台更改描述中的下拉更改事件&更改说明，因为它以前的工作。

<dl class="last"> 
<img dataid="11" alt="12x12 in" src="12x12_in.jpg" class="sizeimage">&nbsp; 
<img dataid="12" alt="14x14 in" src="14x14_in.jpg" class="sizeimage">&nbsp; 
<img dataid="13" alt="16x16 in" src="16x16_in.jpg" class="sizeimage">&nbsp; 
<img dataid="14" alt="20x20 in" src="20x20_in.jpg" class="sizeimage">&nbsp; 
<img dataid="6" alt="22x22 in" src="22x22_in.jpg" class="sizeimage">&nbsp; 
<img dataid="7" alt="12x16 in" src="12x16_in.jpg" class="sizeimage">&nbsp; 
<img dataid="8" alt="12x18 in" src="12x18_in.jpg" class="sizeimage">&nbsp; 
<select class="required-entry super-attribute-select" id="attribute135" name="super_attribute[135]"> 
<option value="11">12x12 in</option> 
<option value="12">14x14 in</option> 
<option value="13">16x16 in</option> 
<option value="14">20x20 in</option> 
<option value="6">22x22 in</option> 
<option value="7">12x16 in</option> 
<option value="8">12x18 in</option> 
</select> 
</dl> 

<script type="text/javascript"> 
var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
$j('.sizeimage').bind('click', { imgId: $j(this).attr('dataid') }, 
function (evt) { 
var $ddlHeader = $j("#attribute135"); 
$ddlHeader.val($j(this).attr('dataid')); //dropdown value changed but description not changed 

//tried below methods but none of them updating description field 
$ddlHeader.val($j(this).attr('dataid')).change(); 
$ddlHeader.val($j(this).attr('dataid')).trigger('change'); 
}); 
}); 
</script>

请帮我解决这个问题。

来源

2013-01-22 Ann

你需要看该组合框例如在自动完成文件http://jqueryui.com/autocomplete/#combobox –

当你处理下拉列表更改事件？ – phnkha

$（'＃attribute135'）。change（function（）{ //一些代码来更新描述... }）; – Ann

我测试你的代码，它工作正常here。

var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
    $j('#attribute135').change(function(){ 
     alert('change'); 
    }); 

    $j('.sizeimage').bind('click', { imgId: $j(this).attr('dataid') }, 
    function (evt) { 
     var $ddlHeader = $j("#attribute135"); 
     $ddlHeader.val($j(this).attr('dataid')).change(); //dropdown value changed but description not changed 
    }); 
});

我认为问题是你删除select元素并将其附加到dl元素。因此，之前绑定到它的所有事件都将丢失。你应该在重新连接select元素后绑定它。

来源

2013-01-22 07:16:33 phnkha

实际上改变函数是写在原型中的。所以我在合并jQuery与原型时遇到问题。 – Ann

双向（jQuery＆Prototype）在下拉列表中的值完全改变。但目前的问题是下拉更改事件不会在后台调用，用于更新表单中的其他元素。当我们设置下拉值时，我需要触发下拉改变事件，所以它会更新形式中的其他元素... – Ann

试制例

$$('.sizeimage').each(function (element) {  
    Event.observe(element, 'click', function(e){ 
     $('attribute135').value = this.readAttribute('dataid') 
    }); 
});

见http://jsfiddle.net/DrcDN/1/

来源

2013-01-22 14:10:07

如何触发图片上的下拉更改事件点击

回答

相关问题