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
    });
});

問題は、選択要素を削除して dl 要素にアタッチすることだと思います。そのため、以前にバインドしたすべてのイベントが失われます。select要素を再アタッチした後、バインドする必要があります。

于 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 に答える