如何觸發圖片上的下拉更改事件點擊

我有一個下拉框，它更新了表單中的描述字段。現在我已經將下拉轉換爲圖像&想要圖像點擊相同的功能。下拉菜單將隱藏在窗體中。如何觸發圖片上的下拉更改事件點擊

所以當有人點擊圖像時，我想觸發後臺更改描述中的下拉更改事件&更改說明，因爲它以前的工作。

<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

如何觸發圖片上的下拉更改事件點擊

回答

相關問題