I have a piece of code i am trying to get the selected value and return it
<div class="language-box">
<div id=mylist class="language-choice">
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<ul id = "dropdown" class = "dropdown-content">
<#list locale.supported as l>
<li><a href = "${l.url}" id="selected">${l.label}<span class = "badge"></span></a></li>
</#list>
</ul>
<a class = "btn dropdown-button" style="background-color: #f5b71b;" data-activates = "dropdown"><p id="lang"></p><i class = "mdi-navigation-arrow-drop-down right"></i></a>
</#if>
<script type="text/javascript">
function changelabel() {
console.log("***" + $('#selected :selected').text())
}
document.getElementById("lang").innerHTML = changelabel();
</script>
</div>
</div>
But currently i have undefined, im not sure if i have placed the id in the wrong place or not, this is jquery and materialcss
below is the whole page as generated
<!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" class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow">
<title>Zaloguj się do Auto-konto-Realm</title>
<link rel="icon" href="/auth/resources/7zry3/login/mytheme/img/favicon.ico"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link href="/auth/resources/7zry3/login/mytheme/css/styles.css" rel="stylesheet"/>
</head>
<body class="">
<div class="language-box">
<div id=mylist class="language-choice">
<ul id = "dropdown" class = "dropdown-content">
<li><a href = "/auth/realms/Auto-konto-Realm/login-actions/authenticate?client_id=autokonto&tab_id=70-Y23dT6jg&execution=1ac9d9f6-6fc0-4cd7-a080-ed4aaaa33b46&kc_locale=en" id="selected">Angielski<span class = "badge"></span></a></li>
<li><a href = "/auth/realms/Auto-konto-Realm/login-actions/authenticate?client_id=autokonto&tab_id=70-Y23dT6jg&execution=1ac9d9f6-6fc0-4cd7-a080-ed4aaaa33b46&kc_locale=pl" id="selected">Polski<span class = "badge"></span></a></li>
</ul>
<a class = "btn dropdown-button" style="background-color: #f5b71b;" data-activates = "dropdown"><p id="lang"></p><i class = "mdi-navigation-arrow-drop-down right"></i></a>
<script type="text/javascript">
function changelabel() {
console.log("***" + $('#selected :selected').text())
}
document.getElementById("lang").innerHTML = changelabel();
</script>
</div>
</div>
<div class="kc-logo-text">
<div class="logos">
</div>
</div>
<div class=" container">
<div id="kc-header" class="">
<div id="kc-header-wrapper"
class="">Auto-konto-Realm</div>
</div>
<div class="valign-wrapper row center">
<div class="">
</div>
<div id="kc-content" class="col card s12 pull-s0 m11 pull-m0 l4 pull-l4">
<div id="kc-content-wrapper" class="xyz1">
<div class="">
<div id="kc-form" >
<div id="kc-form-wrapper" >
<div style="height: 50px; width: 50px;"></div>
<form id="kc-form-login"
onsubmit="login.disabled = true; return true;"
action="http://localhost:8181/auth/realms/Auto-konto-Realm/login-actions/authenticate?session_code=XlcnnWczwxBUCo_HHm-YZ8uFbpX_qrxpr1PCyI5fBac&execution=1ac9d9f6-6fc0-4cd7-a080-ed4aaaa33b46&client_id=autokonto&tab_id=70-Y23dT6jg"
method="post">
<div class="row">
<div class="input-field col s12">
<label for="username">Nazwa użytkownika lub e-mail (login)</label>
<input tabindex="1"
id="username"
name="username"
value=""
type="text"
minlength="4"
autofocus
autocomplete="off"/>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input tabindex="2"
id="password"
type="password"
name="password"
minlength="4"
autocomplete="off">
<label for="password">Hasło</label>
</div>
<div class=" ">
<div id="kc-form-options">
<div class="checkbox">
<label>
<input tabindex="3"
id="rememberMe"
name="rememberMe"
type="checkbox"> Zapamiętaj mnie
</label>
</div>
</div>
</div>
<div id="kc-form-buttons" class=" col s12">
<button tabindex="4"
class="waves-effect waves-light btn"
name="login"
id="kc-login"
type="submit">Logowanie
</button>
<div class="">
<button type="button" tabindex="5"
class="waves-effect waves-light btn darken-2"
onclick="location.href='/auth/realms/Auto-konto-Realm/login-actions/registration?client_id=autokonto&tab_id=70-Y23dT6jg';">Rejestracja</button>
</div>
</div>
</form>
</div>
</div>
<div id="kc-info" class="">
<div id="kc-info-wrapper" class="">
<div class="">
<button tabindex="5"
class="waves-effect waves-light btn darken"
onclick="location.href='/auth/realms/Auto-konto-Realm/login-actions/reset-credentials?client_id=autokonto&tab_id=70-Y23dT6jg';">Nie pamiętasz hasła?</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
