如何在圖片點擊時觸發下拉更改事件

Question

我有一個下拉列表，用於更新表單中的描述字段。 現在，我已將下拉菜單轉換為圖像，並希望在單擊圖像時具有相同的功能。 下拉菜單將是表單中的隱藏元素。

因此，當有人單擊圖像時，我想在后台觸發下拉更改事件並更改其先前的描述。

<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

我測試了您的代碼， 在這里工作正常。

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/