javascript - Jquery 的 HTML 数据不起作用

Question

这是调用它的数组。我有一个功能，我想做的是在更改选择后显示文本。

$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,
    )
);

这是选择框

<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> 

这是我的 Jquery 代码来执行此操作

<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);
        });          
    });          

当我警告 maxdata 时，输出未定义。有人知道为什么我的输出未定义以及如何解决这个问题。

Answer 1

第二个上有 .selected，而不是 :selected:

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