单击图像以更改选定的插件项

时间:2014-03-11 16:55:50

标签: javascript joomla jquery-chosen

我正在使用joomla中的hikashop进行产品布局。示例页面可以在这里看到:product page。特征选择框使用Chosen插件。我想要完成的是让下面的缩略图改变选择框中的选定项目,如下所示:

<img id="hikashop_product_characteristic_35"     
    onclick="document.getElementById('hikashop_product_characteristic_19').value='35';"  
    class="hikashop_child_image" 
    src="/zink/media/com_hikashop/upload/nbg_blackstealth_1061075554.png" 
    alt="hikashop_child_image_35">

如果这是有效的,显然我不会在这里摆姿势。我认为所选择的插件会覆盖选择框,我对此不了解,所以任何帮助都会受到赞赏。

@isherwood - 我尝试了你的例子,我得到了UncaughtSyntaxError:Unexpected Token; 不太确定我的错误在哪里,这是我的整个代码块:

foreach($this->element->variants as $variant){
                foreach($variant->characteristics as $k => $characteristic){
                    $char_id = $characteristic->variant_characteristic_id;
                    $cat_id = $k;
                }
                foreach($variant->images as $image){
                    echo '
                        <img id="hikashop_product_characteristic_'.$char_id.'" class="hikashop_child_image" src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="hikashop_child_image_' . $char_id . '"  />'; ?>
                        <script>
                            char_id = '<?php echo $char_id ?>'
                        </script>
            <?php
                }
            } ?>
            <script>
                $('img.hikashop_child_image').click(function() {
                    $('#hikashop_product_characteristic_19').val(char_id);
                }
            </script>

1 个答案:

答案 0 :(得分:0)

设置选择值后,需要更新选择:

$("#hikashop_product_characteristic_14_chzn").trigger("chosen:updated");

http://harvesthq.github.io/chosen/#change-update-events

很明显,你正在使用jQuery,所以

document.getElementById('hikashop_product_characteristic_19').value='35'

可以简单地

$('#hikashop_product_characteristic_19').val('35');

使用单击事件侦听器而不是内联onclick处理程序可以做得更好。

$('img.hikashop_child_image').click(function() {
    ...
}