0

我有一个下拉列表，用于更新表单中的描述字段。现在我已将下拉菜单转换为图像并希望在图像单击时具有相同的功能。下拉菜单将是表单中的隐藏元素。

因此，当有人单击图像时，我想在背景中触发下拉更改事件并更改描述，因为它以前正在工作。

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

请帮我解决这个问题。

4

2 回答 2

1

我测试了您的代码，它在这里工作正常。

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 元素。因此，您之前绑定到它的所有事件都将丢失。您应该在重新附加选择元素后绑定它。

于 2013-01-22T07:16:33.510 回答
0

原型示例

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

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

于 2013-01-22T14:10:07.670 回答