I need to create something like an opiton using div and sapan, which contain images as icons, and still have an interaction with JavaScript. My code works like this, if some language comes from the select server and it is automatically populated, and it is disabled. I have three language options, and only two can be selected. My main difficulty is when it comes to interacting with JavaScript. I already have a JavaScript ready but I do not know how I can change it to work with div and span
<div class="divIdiomas" ng-show="vm.form.selectIdioma">
<label class="idioma">{{'MSG.IDIOMAS'| translate}}</label>
<div class="idiomaescolha1">
<select ng-model="vm.form.produto.idioma1" id="idioma1" class="campoHora input-lg">
<option value=""></option>
<option value="POR" style="background-image:url('/assets/images/flags/4x3/br.svg');" aria-hidden="true">{{'MSG.PORTUGUES'| translate}}</option>
<option value="ESP" style="background-image:url('/assets/images/flags/4x3/es.svg');" aria-hidden="true">{{'MSG.ESPANHOL'| translate}}</option>
<option value="ING" style="background-image:url('/assets/images/flags/4x3/us.svg');" aria-hidden="true">{{'MSG.INGLES'| translate}}</option>
</select>
</div>
<div class="idiomaescolha2" ng-show="vm.form.produto.temIdioma">
<select ng-model="vm.form.produto.idioma2" id="idioma2" class="campoHora input-lg">
<option value=""></option>
<option value="POR" style="background-image:url('/assets/images/flags/4x3/br.svg');" aria-hidden="true">{{'MSG.PORTUGUES'| translate}}</option>
<option value="ESP" style="background-image:url('/assets/images/flags/4x3/es.svg');" aria-hidden="true">{{'MSG.ESPANHOL'| translate}}</option>
<option value="ING" style="background-image:url('/assets/images/flags/4x3/us.svg');" aria-hidden="true">{{'MSG.INGLES'| translate}}</option>
</select>
</div>
function getIdiomas() {
vm.form.produto.temIdioma = false;
if ((vm.form.produto.codigo === "2") || (vm.form.produto.codigo === "3")) {
vm.form.selectIdioma = true;
vm.form.produto.idioma1 = '';
vm.form.produto.idioma2 = '';
var selecionado = $('#horaPasseios :selected').text();
if (selecionado) {
for (var i = 0; i < vm.form.listaHorarios.length; i++) {
if (((vm.form.listaHorarios[i].H_INI).substring(0, 5)) == selecionado) {
if (vm.form.listaHorarios[i].I_1) {
vm.form.produto.temIdioma = true;
vm.form.produto.idioma1 = vm.form.listaHorarios[i].I_1
document.getElementById("idioma1").disabled = true;
break;
} else {
vm.form.produto.temIdioma = false;
}
}
}
if (vm.form.produto.temIdioma) {
for (var i = 0; i < vm.form.listaHorarios.length; i++) {
if (((vm.form.listaHorarios[i].H_INI).substring(0, 5)) == selecionado) {
if (vm.form.listaHorarios[i].I_2) {
if (vm.form.listaHorarios[i].I_2 == vm.form.listaHorarios[i].I_1) {
vm.form.produto.temIdioma2 = false
break;
} else {
vm.form.produto.temIdioma2 = true;
vm.form.produto.idioma2 = vm.form.listaHorarios[i].I_2
document.getElementById("idioma2").disabled = true;
break;
}
} else {
vm.form.produto.temIdioma2 = false;
}
}
}
if (!vm.form.produto.temIdioma2) {
for (var i = 0; i < vm.form.listaHorarios.length; i++) {
if (((vm.form.listaHorarios[i].H_INI).substring(0, 5)) == selecionado) {
var select = document.getElementById("idioma2");
for (var j = 0; j < select.length; j++) {
if (select[j].value == vm.form.listaHorarios[i].I_1) {
select.remove(j)
break;
}
}
break;
}
}
}
}
}
} else {
vm.form.selectIdioma = false;
}
}