javascript - How to target data attribute of a select option?

I'm trying to make an image change based on the dropdown/select option that a user chooses. However, I need to do this using a data attribute rather than the easier option value, since I need that to be used for something else. I can't seem to figure out what I'm doing wrong. The code I've attached doesn't target the data-image attribute. And ideas what I'm doing wrong?

Example Code:

<html>
<div>
    *Flavor 1:
</div>
<div>
    <select class="custom-cupcake-flavor" name="custom-cupcake-flavor">
        <option data-image="noimage.jpg" value="">-- Please Choose an Option --</option>
        <option data-image="Chocolate-Covered-Strawberry.jpg" value="Chocolate Swirl">Chocolate Swirl</option>
        <option data-image="strawberryLemonade.jpg" value="Extreme Lemon">Extreme Lemon</option>
        <option data-image="Cookie-Dough-Delight.jpg" value="Vanilla Blast">Vanilla Blast</option>
    </select>
</div>


<br>

<div class="col-md-6">
    <img id="uploadedImage" src=";txt=400%C3%97400&w=400&h=400">
    <br>

</div>
<script src="//code.jquery/jquery-1.11.3.min.js"></script>

<div style="clear:both;"></div>
<script type='text/javascript'>
    $(document).ready(function() {
        var flavor;
        var image_name;

        $(".custom-cupcake-flavor").on('change', function() {
            flavor = $(this).data("image");
            image_name = ("/images/" + flavor);

            $('#uploadedImage').fadeOut(200, function() {
                $('#uploadedImage').attr('src', image_name).bind('onreadystatechange load', function() {
                    if (thisplete) $(this).fadeIn(400);
                });
            });
        });

    });
    <!-- Hides Product Image when "No image" option is selected.-->
    $(document).ready(function() {
        $('.custom-cupcake-flavor').on('change', function() {
            if (this.val() !== "") {
                $("#uploadedImage").hide();
            } else {
                $("#uploadedImage").show();
            }
        });
    });
</script>

</html>

Example Code:

<html>
<div>
    *Flavor 1:
</div>
<div>
    <select class="custom-cupcake-flavor" name="custom-cupcake-flavor">
        <option data-image="noimage.jpg" value="">-- Please Choose an Option --</option>
        <option data-image="Chocolate-Covered-Strawberry.jpg" value="Chocolate Swirl">Chocolate Swirl</option>
        <option data-image="strawberryLemonade.jpg" value="Extreme Lemon">Extreme Lemon</option>
        <option data-image="Cookie-Dough-Delight.jpg" value="Vanilla Blast">Vanilla Blast</option>
    </select>
</div>


<br>

<div class="col-md-6">
    <img id="uploadedImage" src="https://placeholdit.imgix/~text?txtsize=33&txt=400%C3%97400&w=400&h=400">
    <br>

</div>
<script src="//code.jquery./jquery-1.11.3.min.js"></script>

<div style="clear:both;"></div>
<script type='text/javascript'>
    $(document).ready(function() {
        var flavor;
        var image_name;

        $(".custom-cupcake-flavor").on('change', function() {
            flavor = $(this).data("image");
            image_name = ("/images/" + flavor);

            $('#uploadedImage').fadeOut(200, function() {
                $('#uploadedImage').attr('src', image_name).bind('onreadystatechange load', function() {
                    if (this.plete) $(this).fadeIn(400);
                });
            });
        });

    });
    <!-- Hides Product Image when "No image" option is selected.-->
    $(document).ready(function() {
        $('.custom-cupcake-flavor').on('change', function() {
            if (this.val() !== "") {
                $("#uploadedImage").hide();
            } else {
                $("#uploadedImage").show();
            }
        });
    });
</script>

</html>

Share Improve this question edited Sep 18, 2015 at 23:44 Sushil 2,8354 gold badges22 silver badges29 bronze badges asked Sep 18, 2015 at 23:38 Josh979 3614 silver badges17 bronze badges

your if condition should be like this if($(this).data('image') != '') – Sushil Commented Sep 18, 2015 at 23:42
I'm not sure which if condition you are referring to... If you mean if (this.val() !== "") I have it set to check for the value of the option, not the data-image attribute on purpose. This is because the first option in the select dropdown will always have a value of "". – Josh979 Commented Sep 18, 2015 at 23:53
oh.. my bad.. i thought you wanted to check the data attribute value instead of the option value. – Sushil Commented Sep 18, 2015 at 23:54

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

You can use the :selected selector to get the selected option in your dropdown:

$('.custom-cupcake-flavor').on('change', function() {
    var $option = $(this).find(':selected');
    var imageUrl = $option.data('image');

    // You might want to do something with imageUrl here:
    $('#uploadImage').attr('src', imageUrl);
});
// If you want to run the above on initial load you can trigger the change event:
// $('.custom-cupcake-flavor').trigger('change');

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744897230a4599769.html

javascript - How to target data attribute of a select option? - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to target data attribute of a select option? - Stack Overflow

1 Answer 1

相关推荐