Create Options with div and make interaction with JavaScript

-1

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;
}
}
    
asked by anonymous 30.10.2017 / 12:32

1 answer

1

As for the question Existe algo que posso usar para substituir o option do select, preciso fazer um select que que tenha imagens(ícones)

The answer is there is yes

Example

.select-sim {
  width:200px;
  height:22px;
  line-height:22px;
  vertical-align:middle;
  position:relative;
  background:white;
  border:1px solid #ccc;
  overflow:hidden;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-sim:hover::after {
  content:"";
}

.select-sim:hover {
  overflow:visible;
}

.select-sim:hover .options .option label {
  display:inline-block;
}

.select-sim:hover .options {
  background:white;
  border:1px solid #ccc;
  position:absolute;
  top:-1px;
  left:-1px;
  width:100%;
  height:88px;
  overflow-y:scroll;
}

.select-sim .options .option {
  overflow:hidden;
}

.select-sim:hover .options .option {
  height:22px;
  overflow:hidden;
}

.select-sim .options .option img {
  vertical-align:middle;
}

.select-sim .options .option label {
  display:none;
}

.select-sim .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display:block;
  width:100%;
}

.select-sim:hover .options .option input + label {
  display:block;
}

.select-sim:hover .options .option input:checked + label {
  background:#fffff0;
}
<div class="select-sim" id="select-color">
  <div class="options">
    <div class="option">
      <input type="radio" name="color" value="" id="color-" checked />
      <label for="color-">
        Selecione
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="red" id="color-red" />
      <label for="color-red">
        <img src="https://i.stack.imgur.com/m3aQy.png"alt="" /> {{'MSG.PORTUGUES'| translate}}
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="green" id="color-green" />
      <label for="color-green">
        <img src="https://i.stack.imgur.com/3sd09.png"alt="" /> {{'MSG.ESPANHOL'| translate}}
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="blue" id="color-blue" />
      <label for="color-blue">
        <img src="https://i.stack.imgur.com/tw8mK.png"alt="" /> {{'MSG.INGLES'| translate}}
      </label>
    </div>
    
  </div>
</div>

Font - brother Alvaro Montoro

  

About the interaction with the script is already another chapter and you do not need to change option by div and span:)

See example with options and images here

  

If the problem was the options, I believe that your script should work:

Library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--<msdropdown>--><scriptsrc="jquery.dd.js"></script>
<link href="dd.css" rel="stylesheet"/>
<!-- </msdropdown> -->

HTML

<select ng-model="vm.form.produto.idioma1" id="idioma1" class="select" style="width: 300px">
      <option value="">{{'MSG.IDIOMAS'| translate}}</option>
      <option value='POR' data-image="https://i.stack.imgur.com/m3aQy.png" data-imagecss="flag br" data-title="Brazil">
        {{'MSG.PORTUGUES'| translate}}l</option>
      <option value='ESP' data-image="https://i.stack.imgur.com/3sd09.png" data-imagecss="flag es" data-title="Spain">
        {{'MSG.ESPANHOL'| translate}}</option>
      <option value='ING' data-image="https://i.stack.imgur.com/tw8mK.png" data-imagecss="flag us" data-title="United States">
        {{'MSG.INGLES'| translate}}</option>
</select>

<br><br>

<div class="idiomaescolha2" ng-show="vm.form.produto.temIdioma">
<select ng-model="vm.form.produto.idioma2" id="idioma2" class="select" style="width: 300px">
      <option value="">{{'MSG.IDIOMAS'| translate}}</option>
      <option value='POR' data-image="https://i.stack.imgur.com/m3aQy.png" data-imagecss="flag br" data-title="Brazil">
        {{'MSG.PORTUGUES'| translate}}l</option>
      <option value='ESP' data-image="https://i.stack.imgur.com/3sd09.png" data-imagecss="flag es" data-title="Spain">
        {{'MSG.ESPANHOL'| translate}}</option>
      <option value='ING' data-image="https://i.stack.imgur.com/tw8mK.png" data-imagecss="flag us" data-title="United States">
        {{'MSG.INGLES'| translate}}</option>
</select>

Script

$(document).ready(function() {      
    $(".select").msDropdown({roundedBorder:false});
});

msdropdown files in github

jquery.dd.js

dd.css

    
30.10.2017 / 13:23