Create Options with div and interact with Javascript

Asked

Viewed 290 times

-1

I need to create something similar to an opiton using div and sapan, which contain images like icons, and still have an interaction with Javascript. My code works like this, if you see any server language select it and fill it automatically, and it is disabled. I have three language options, and only two can be selected. My main difficulty is when interacting with Javascript. I already have a Javascript ready but do not know how to change to work with div e 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

  • Dude, as far as I know, people read dynamically generated options in html, interpret them and exchange <select> for <div> or <ul> with a style that makes it look like a drop-down list. Gives a search in this sense. As far as I know, do not have this option of icons in the option.

  • But the way it is in your question it works all right?

  • See if the other solution in my answer meets you.

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>

Source - brother Alvaro Montoro

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

See example with options and images here

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

Library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- <msdropdown> -->
<script src="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 on github

jquery.dd.js

dd css.

  • My main problem is with the script.

  • @Erickzanetti, in that case I suggest you rephrase the question

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.