Do not add selected item from a list box

Question

Do not add selected item from a list box

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)

1

There are two list boxes, one with templates to choose from and another with templates to invoice. With a button it is about adding to the second list box the selected option of the first one, but it does not do anything.

<br><br>
    <div id="seleccionar">
        <select name="seleccionarPlantilla" id="seleccionarPlantilla">
            <option value="option1">Tom</option>
            <option value="option2">Logros</option>
            <option value="option3">Líderes</option>
            <option value="option4">Marca</option>   
            <option value="option5">Comida</option>
            <option value="option6">Abogacía</option>
            <option value="option7">Nuestro</option>
            <option value="option8">Vigas</option>  
            <option value="option9">Axis</option> 
        </select>
    </div>
    <div id="botonSeleccionar">
        <button id="Agregar" name="Agregar" onclick="">Agregar</button>
    </div>

        <br><br>
    <select name="plantillasAFacturar" id="plantillasAFacturar">        
    </select>

<script type="text/javascript">
     function agregarPlantilla(){
        $(plantillasAFacturar).prepend($( "#seleccionarPlantilla option:selected" ).attr("value"));
     }


    </script>

jquery html select

asked by Jhon Hernández 10.10.2018 в 07:45

source

3 answers

2

I think this is what you are looking for, if you already want the added options to not be repeated, you should do a search on the other select before adding the data.

IMPORTANT: On your button, in the onclick you did not have anything written, you must call the javascript / jquery function

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
     function agregarPlantilla(){
     $('#seleccionarPlantilla option:selected').each(function () {
        $("<option/>").
        val($(this).val()).
        text($(this).text()).
        appendTo("#plantillasAFacturar");
    });
     }
</script>
</head>
<body>

<br><br>
    <div id="seleccionar">
        <select name="seleccionarPlantilla" id="seleccionarPlantilla">
            <option value="option1">Tom</option>
            <option value="option2">Logros</option>
            <option value="option3">Líderes</option>
            <option value="option4">Marca</option>   
            <option value="option5">Comida</option>
            <option value="option6">Abogacía</option>
            <option value="option7">Nuestro</option>
            <option value="option8">Vigas</option>  
            <option value="option9">Axis</option> 
        </select>
    </div>
    
    <br><br>
    <div id="botonSeleccionar">
        <button id="Agregar" name="Agregar" onclick="agregarPlantilla()">Agregar</button>
    </div>
    
    <br><br>
    <select name="plantillasAFacturar" id="plantillasAFacturar">        
    </select>


</body>
</html>

answered by 10.10.2018 в 08:21

2

You have a few concept flaws. I publish your code with the arrangements for it to work and then I will comment on what you were failing.

HTML

div id="seleccionar">
        <select name="seleccionarPlantilla" id="seleccionarPlantilla">
            <option value="option1">Tom</option>
            <option value="option2">Logros</option>
            <option value="option3">Líderes</option>
            <option value="option4">Marca</option>   
            <option value="option5">Comida</option>
            <option value="option6">Abogacía</option>
            <option value="option7">Nuestro</option>
            <option value="option8">Vigas</option>  
            <option value="option9">Axis</option> 
        </select>
    </div>
    <div id="botonSeleccionar">
        <button id="agregar" name="Agregar">Agregar</button>
    </div>

        <br><br>
    <select name="plantillasAFacturar" id="plantillasAFacturar">        
    </select>

JQUERY

$('#agregar').click(function () {
    $('#plantillasAFacturar').append($("#seleccionarPlantilla option:selected"));
});

1) To begin with, the first thing I did was to change the declaration of the function to an anonymous one on the button element "add" to which I have changed the name (it had the name of "Add" and I do not like to start the names of something else that is not a class are uppercase.

2) Then I changed the selector that you were using in your Jquery function, in the way you were calling it, you alluded to a variable $(plantillasAFacturar) instead of an element called by its ID $('#plantillasAFacturar') .

3) And finally, I changed the function of prepend to append , so that the added item is positioned last in the list of option (with prepend would be positioned first on the list).

answered by 10.10.2018 в 08:23

What is the next algorithm for? Problems showing some special characters [closed]

score 2 · Accepted Answer

You have a few, mistakes. Starting because $ (templates to invoice), it should be $ ('# templates to invoice'). This is how you turn your selector into a jquery object. Also, you never call your function through an event. I intuit that you want to do it in the event of the click of the add button, and that is the solution I give you. You could also do it on the 'onchange'

Here is the codepen link

And here the HTML

<div id="seleccionar">
        <select name="seleccionarPlantilla" id="seleccionarPlantilla">
            <option value="option1">Tom</option>
            <option value="option2">Logros</option>
            <option value="option3">Líderes</option>
            <option value="option4">Marca</option>   
            <option value="option5">Comida</option>
            <option value="option6">Abogacía</option>
            <option value="option7">Nuestro</option>
            <option value="option8">Vigas</option>  
            <option value="option9">Axis</option> 
        </select>
    </div>
    <div id="botonSeleccionar">
        <button type="submit" id="agregar" name="agregar">Agregar</button>
    </div>

        <br><br>
    <select name="plantillasAFacturar" id="plantillasAFacturar">        
    </select>

and the JS

// siempre cashea los objetos en una variable para que la performance sea mejor
var $agregar = $('#agregar'),
    $select2 = $('#plantillasAFacturar');
// Debes agregar el event handler
$agregar.on('click', function() {
  var seleccion = $('#seleccionarPlantilla option:selected').attr('value');
  $select2.prepend('<option value="'+ seleccion +'">' + seleccion + '</option>');
});

By the way, if you want to add the label and not the value, it would be convenient to use this snippet (I gave you the value, because that is how you suggested that you wanted to do it. You can also optimize it by setting a default value to the second select.

// always cashea the objects in a variable so that the performance is better

var $agregar = $('#agregar'),
    $select2 = $('#plantillasAFacturar');
// Debes agregar el event handler
$agregar.on('click', function() {
  var seleccion = $('#seleccionarPlantilla option:selected').attr('value'),
      etiqueta = $('#seleccionarPlantilla option:selected').text();
  $select2.prepend('<option value="'+ seleccion +'">' + etiqueta + '</option>');
});