Question

我有一个下拉列表，用于更新表单中的说明字段。现在我已将下拉列表转换为图像＆amp;想要在图像上单击相同的功能。下拉列表将隐藏在表单中。

所以当有人点击图片时，我想在后台触发下拉变更事件＆amp;改变以前工作的描述。

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

请帮我解决这个问题。

Answer 1

我测试了你的代码，它运行良好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元素后绑定它。

Answer 2

原型示例

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

请参阅http://jsfiddle.net/DrcDN/1/

如何在图像点击时触发下拉列表更改事件

2 个答案: