Kako prikazati value2 iz selekt elementa

Pozdrav,

kako umjesto value selektirati value2 ?

var kontinet = e.options[e.selectedIndex].value;

html

<select id="tdp-0" class="tdp-class-0">
<option>Kontinent</option>
<option value="137" value2="afrika">Afrika</option>
<option value="142" value2="asien">Asien</option>
<option value="80" value2="europa">Europa</option>
<option value="132" value2="nordamerika">Nordamerika</option>
<option value="278" value2="mittelamerika">Mittelamerika</option>
   
</select>

		$("#tdp-1").children('option:gt(0)').hide();
    $("#tdp-2").children('option:gt(0)').hide();
    $("#tdp-0").change(function() {
    var e = document.getElementById("tdp-0");
		var kontinet = e.options[e.selectedIndex].value;
        $("#tdp-1").children('option').hide();
        $("#tdp-1").children("option[value1^=" + kontinet + "]").show();

    })
    
    $("#tdp-1").change(function() {
        var b = document.getElementById("tdp-1");
    var zemlja = b.options[b.selectedIndex].value;
        $("#tdp-2").children('option').hide();
        $("#tdp-2").children("option[value1^=" + zemlja + "]").show();


      })

Dohvatiti vrijednost value2 atributa na selektiranoj opciji mozes koristeci Element.getAttribute()

Primjer :

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>getAttribute primjer</title>
</head>
<body>
    <select id="tdp-0" class="tdp-class-0">
        <option value="137" value2="afrika">Afrika</option>
        <option value="142" value2="asien">Asien</option>
        <option value="80"  value2="europa">Europa</option>
        <option value="132" value2="nordamerika">Nordamerika</option>
        <option value="278" value2="mittelamerika">Mittelamerika</option>
    </select>
    <script>
        function onContinentChange(event)
        {
            alert(event.target.options[event.target.selectedIndex].getAttribute('value2'));
        }
        document.getElementById('tdp-0').addEventListener('change', onContinentChange)
    </script>
</body>
</html>