I need to validate in a script that I do not select the same option more than once

Question

I need to validate in a script that I do not select the same option more than once

Navigation

#1 by (1 votes)

0

So I have my script:

var imagenes = {
  "leon": 'imagenes/leon.gif',
  "burro": 'imagenes/burro.gif',
  "ballena": 'imagenes/ballena.gif',
  "gato": 'imagenes/gato.gif',
  "elefante":'imagenes/elefante.gif',
  "pato": 'imagenes/pato.gif',
  "hiena": 'imagenes/hiena.gif',
  "grillo": 'imagenes/grillo.gif',
  "pajaro": 'imagenes/pajaro.gif',
  "cabra": 'imagenes/cabra.gif',
  "jaguar": 'imagenes/jaguar.gif',
  "mono": 'imagenes/mono.gif',
  "oso": 'imagenes/oso.gif',
  "caballo":'imagenes/caballo.gif',
  "sapo": 'imagenes/sapo.gif',
  "perro": 'imagenes/perro.gif',
  "vaca": 'imagenes/vaca.gif'
}

function agregar() {
  var seleccion = document.getElementById("opcion").value;
    if(seleccion==0){
        alert("SELECCIONE UNA OPCION");
    } else{
    var imagen = document.createElement('img');
    imagen.src = imagenes[seleccion];
    document.getElementById("impresion").appendChild(imagen);               
    }

}

I need not to repeat any animal in the html select

javascript html

asked by user97805 24.08.2018 в 23:29

source

1 answer

Isolate Qwidget from a function How to validate a json if there are null parameters in java

score 1 · Accepted Answer

Another option, you could disable the options that you are choosing. Something like this:

var imagenes = {
  "leon": 'imagenes/leon.gif',
  "burro": 'imagenes/burro.gif',
  "ballena": 'imagenes/ballena.gif',
  "gato": 'imagenes/gato.gif',
  "elefante": 'imagenes/elefante.gif',
  "pato": 'imagenes/pato.gif',
  "hiena": 'imagenes/hiena.gif',
  "grillo": 'imagenes/grillo.gif',
  "pajaro": 'imagenes/pajaro.gif',
  "cabra": 'imagenes/cabra.gif',
  "jaguar": 'imagenes/jaguar.gif',
  "mono": 'imagenes/mono.gif',
  "oso": 'imagenes/oso.gif',
  "caballo": 'imagenes/caballo.gif',
  "sapo": 'imagenes/sapo.gif',
  "perro": 'imagenes/perro.gif',
  "vaca": 'imagenes/vaca.gif"/>'
}

function agregar() {
  var seleccion = document.getElementById("opcion").value;
  var e = document.getElementById("opcion");
  e.options[e.selectedIndex].disabled = true;
  var imagen = document.createElement('img');

  //imagen.src = imagenes[seleccion];
  // descomentar la linea anterior, comentar la siguiente (es para que se vea el demo)
  imagen.src = "https://picsum.photos/500/?random&dblrand=" + seleccion;
  document.getElementById("impresion").appendChild(imagen);
}


function borrar() {
  document.getElementById("impresion").innerHTML = "";
}

#contenedor img {
  width: 100px;
  height: 100px;
  border-radius: 8000px;
  border: 1px solid black;
  overflow: hidden;
  margin: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <title>ANIMALES</title>
  <link rel="stylesheet" type="text/css" href="animales.css">
  <script type="text/javascript" src="js/animales.js"></script>

</head>

<body>
  <select id="opcion">
    <option value="" disabled selected>--ELIGE UNA OPCION--</option>
    <option value="leon">LEON</option>
    <option value="elefante">ELEFANTE</option>
    <option value="grillo">GRILLO</option>
    <option value="cabra">CABRA</option>
    <option value="gato">GATO</option>
    <option value="caballo">CABALLO</option>
    <option value="mono">MONO</option>
    <option value="jaguar">JAGUAR</option>
    <option value="pajaro">PAJARO</option>
    <option value="oso">OSO</option>
    <option value="pato">PATO</option>
    <option value="perro">PERRO</option>
    <option value="sapo">SAPO</option>
    <option value="vaca">VACA</option>
    <option value="burro">BURRO</option>
    <option value="hiena">HIENA</option>
    <option value="ballena">BALLENA</option>
  </select>
  <button onclick="agregar()">AGREGAR</button>
  <button onclick="borrar()">BORRAR</button><br><br>
  <div id="contenedor">
    <div id="impresion"></div>
  </div>
</body>

</html>