CODEWITHSUNDEEP
javascriptjquery
D. Ronald
D. Ronald

Reputation: 51

HTML data for Jquery not working

This is the array from where its called. I have an function, what i want to do is to display a text after you change the select. 

$vak=array(
    "algemeen"=>array(
        'title' => 'Algemeen',
        'maxWoordPerDag' => 100,
    ),
    "technischict"=>array(
        'title' => 'Technisch/ICT',
        'maxWoordPerDag' => 10,
    ),
    "juridisch"=>array(
        'title' => 'Juridisch',
        'maxWoordPerDag' => 10,
    ),
    "marketing"=>array(
        'title' => 'Marketing',
        'maxWoordPerDag' => 10,
    ),
    "websiteshop"=>array(
        'title' => 'Website/shop',
        'maxWoordPerDag' => 10,
    ),
    "medisch"=>array(
        'title' => 'Medisch',
        'maxWoordPerDag' => 10,
    ),
    "financieel"=>array(
        'title' => 'Financieel',
        'maxWoordPerDag' => 10,
    ),
    "beëdigd"=>array(
        'title' => 'Beëdigd',
        'maxWoordPerDag' => 10,
    )
);

This is the select box

<label>Vakgebied</label>
<p id="maxwoorden"></p>
<select id="vakgebied" 
    class="form-control"   
    name="vakgebied">
    <?php foreach($vak as $key => $value): ?>
    <option data-max="<?php echo $value['maxWoordPerDag'];?>" value="<?php echo $key?>">
    <?php echo $value['title'] ?></option>
    <?php endforeach; ?> 
</select>

And this is my Jquery code to do so

<script type="text/javascript">
    $(document).ready(function()
    { 
        $("#vakgebied").on('change', function()
        {
            var current = $(this).find("option:selected").html();
            alert(current);
            var maxdata = $(this).find('option.selected').attr('data-max');
            alert(maxdata);
        });          
    });

When i alert maxdata i get undefined as output. Does someone knows why i get undefined as output and how can i fix this.

Upvotes: 0

Views: 55

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You have .selected, not :selected on the second one:

var maxdata = $(this).find('option:selected').attr('data-max');

Upvotes: 2

Related Questions