0

I added below code my list.phtml on change it will show the div. First product it's working fine. if i change 2st product 1st product value only change

<Select id="colorselector-<?php echo $_product->getId()?>">
                           <option value="red">Red</option>
                           <option value="yellow">Yellow</option>
                           <option value="blue">Blue</option>
                        </Select>
                        <div id="red" class="colors" style="display:none"> red... </div>
                        <div id="yellow" class="colors" style="display:none"> yellow.. </div>
                        <div id="blue" class="colors" style="display:none"> blue.. </div>

                            <script type="text/javascript">
        jQuery(function() {
        $('#colorselector-<?php echo $_product->getId()?>').change(function(){
            $('.colors').hide();
            $('#' + $(this).val()).show();
        });
    });
</script>
1

The issue is because you are using same ids for your colors.

<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

Using $('#' + $(this).val()).show(); code jQuery will get first element matching with id.

Try updating your colors' ids.

<div id="red-<?php echo $_product->getId()?>" class="colors" style="display:none"> red... </div>
<div id="yellow-<?php echo $_product->getId()?>" class="colors" style="display:none"> yellow.. </div>
<div id="blue-<?php echo $_product->getId()?>" class="colors" style="display:none"> blue.. </div>

And update your jQuery code $('#' + $(this).val() + '-<?php echo $_product->getId()?>').show();

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.