CODEWITHSUNDEEP
jqueryselectselectorjsfiddle
Canc
Canc

Reputation: 13

Jquery select selector - Jsfiddle example

I find this nice demo on fiddle : http://jsfiddle.net/TLBvx/1/

And it doesn't work on my PC, my code below am I something missing ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$('select.div-toggler').change(function(){
    var target = $(this).data('target');
    $(target).children().addClass('hide');
    var show = $("option:selected", this).data('show');
    $(show).removeClass('hide');
});
</script>
<style>
.hide {
    display:none;
}
</style>
</head>

<body>
<select class="div-toggler" data-target=".my-info-1">
    <option value="">Select a fruit...</option>
    <option value="orange" data-show=".citrus">Orange</option>
    <option value="lemon" data-show=".citrus">Lemon</option>
    <option value="apple" data-show=".pome">Apple</option>
    <option value="pear" data-show=".pome">Pear</option>
</select>

<div class="my-info-1">
    <div class="citrus hide">Citrus is a common term and genus (Citrus) of flowering plants in the rue family, Rutaceae.</div>
    <div class="pome hide">In botany, a pome (after the Latin word for fruit: pōmum) is a type of fruit produced by flowering plants in the subtribe Malinae of the family Rosaceae.</div>
</div>
</body>
</html>

Why it doesn't work ?

Upvotes: 0

Views: 1030

Answers (2)

rrk
rrk

Reputation: 15846

$(document).on('ready', function() {
  $('select.div-toggler').on('change',function() {
    var target = $(this).data('target');
    var show = $("option:selected", this).data('show');
    $(target).children().addClass('hide');
    $(show).removeClass('hide');
  });
});
.hide {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="div-toggler" data-target=".my-info-1">
    <option value="">Select a fruit...</option>
    <option value="orange" data-show=".citrus">Orange</option>
    <option value="lemon" data-show=".citrus">Lemon</option>
    <option value="apple" data-show=".pome">Apple</option>
    <option value="pear" data-show=".pome">Pear</option>
</select>

<div class="my-info-1">
    <div class="citrus hide">Citrus is a common term and genus (Citrus) of flowering plants in the rue family, Rutaceae.</div>
    <div class="pome hide">In botany, a pome (after the Latin word for fruit: pōmum) is a type of fruit produced by flowering plants in the subtribe Malinae of the family Rosaceae.</div>
</div>

Upvotes: 0

Perplexity
Perplexity

Reputation: 21

You must execute the jQuery only once the document (HTML) has been loaded into memory. Without wrapping it in a $(document).ready(function(){}); it executes before the browser has had a chance to see the HTML.

$(document).ready(function(){
    $('select.div-toggler').change(function(){
        var target = $(this).data('target');
        $(target).children().addClass('hide');
        var show = $("option:selected", this).data('show');
        $(show).removeClass('hide');
    });
});

Upvotes: 2

Related Questions