Agregar <options> de un select a otro dinámicamente con JQuery

| 10 agosto, 2015 | JQuery/Javascript | 3 comentarios

Este es un método para poder agregar opciones desde un select a otro dinámicamente, así mismo dejo el método para remover las opciones agregadas. El método que seleccioné es simplemente haciendo doble click en las opciones para disparar el método que da en ustedes si desean agregarle botones para disparar dichos métodos que usualmente también se agregan.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
  <head>
    <title>Agregar <options> de un select a otro con JQuery</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Agregar &lt;options&gt; de un select a otro con JQuery</h1>
    
    <div style="margin-top: 10px; margin-bottom: 10px;">
      Hacer doble clic sobre una opcion para agregarla
    </div>
    
    <div style="display: inline-block; margin-right: 20px;">
      Etiquetas disponibles<br/>
      <select id="opciones_disponibles" size="10" style="width: 200px;">
        <option value="1">Opcion 1</option>
        <option value="2">Opcion 2</option>
        <option value="3">Opcion 3</option>
        <option value="4">Opcion 4</option>
        <option value="5">Opcion 5</option>
        <option value="6">Opcion 6</option>
        <option value="7">Opcion 7</option>
        <option value="8">Opcion 8</option>
        <option value="9">Opcion 9</option>
        <option value="10">Opcion 10</option>
      </select>
    </div>
    
    <div style="display: inline-block;">
      Etiquetas agregadas<br/>
      <select id="opciones_agregadas" size="10" style="width: 200px;">      
        
      </select>
    </div>
    
    <script src="../jquery-1.11.2.min.js"></script>
    <script>
      $(document).ready(function(){
        //agregar opciones
        $('#opciones_disponibles option').dblclick(function(){
          var valor = $(this).val(); //valor de la opcion
          var texto = $(this).text(); //texto de la opcion
 
          //verificar si la opcion no esta agregada antes de agregarla
          if ( $('#opciones_agregadas option[value="' + valor + '"]').length === 0 ){
            //agregar la opcion
            $('#opciones_agregadas').append($('<option>', {
              value: valor,
              text: texto
            }));
          }      
        });
        
        //remover opciones
        $(document).on('dblclick', '#opciones_agregadas option',function(){
          var valor = $(this).val(); //valor de la opcion
          
          //eliminar la opcion con valor X
          $('#opciones_agregadas option[value="' + valor + '"]').remove();  
        });
 
      });
    </script>
    
  </body>
</html>

DEMO

Entradas relacionadas

Sobre el Autor

hug0

Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla

3 comentarios
  1. Maria Responder

    Hola hugo! estoy trando de hacer un Select con Javascript y HTML para que al precionar una option que tiene como texto «agregar» me cree otra option, me explico estoy trabajando con direcciones de habitacion, ejemplo, debo registrar estado, municipio, sector y calle cada uno con su select pero supongamos no esta registrado el municipio, entonces debo agregarlo atraves de un option que como ya explique tiene texto agregar. te agradezco de antemano la ayuda!!

  2. DWolf Responder

    Hola disculpa por que es que no me funciona tu ejemplo al querer agregar un elemento a la otra lista ..??

    • hug0 Responder

      Esta un poco difícil saber sin saber nada de como has puesto el código.

      Podrías empezar revisando si tenes bien la localización de la librería JQuery.

      De paso prueba del demo, si te funciona el demo entonces podremos verificar que debe haber alguna cosita con tu código.

      http://jsfiddle.net/hugolizama/839rjbtn/

      Saludos.

Deja un comentario