Create Options with div and make interaction with JavaScript

Question

Create Options with div and make interaction with JavaScript

Navigation

#1 by (1 votes)

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

javascript html5 css3

asked by anonymous 30.10.2017 / 12:32

1 answer

Problem in Bootstrap Directory Error "zero is not a supported scheme"

score 1 · Accepted Answer

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