1

al armar un formulario con la funcion de añadir y remover campo con jquery. Lo tome de un caso similar y funciona bien con input, pero me resultaría mejor que el campo sea un select. Intente hacerlo pero sin exito.

tambien cree el caso en jsfidle http://jsfiddle.net/hernan527/xud9h0g8/6/#collaborate

gracias por su colaboracion

<div class="row">
<li class="col-md-4 col-sm-4 col-xs-4"><img src="https://dl.dropboxusercontent.com/s/p5mlgajj54r6b1y/Sigmas.gif?dl=0" id="AddMoreFileBox" height="42" width="42">
<select class="form-control" type="text" name="mytext[]" id="field_1" />
<option selected disabled>Opciones</option>
<option value="Sin Opcion">Sin Opcion</option>
<option value="1">Opcion 1</option>
<option value="2">Opcion 2</option>
<option value="3">Opcion 3</option></select>
<li class="col-md-4 col-sm-4 col-xs-4" id="InputsWrapper">
</div>

<script>
$(document).ready(function() {

var MaxInputs       = 1; //maximum extra input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreFileBox"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

//on add input button click
$(AddButton).click(function (e) {
    //max input box allowed
    if(x <= MaxInputs) {
        FieldCount++; //text box added ncrement
        //add input box
        $(InputsWrapper).append('<div><img src="https://dl.dropboxusercontent.com/s/vaas3wyluypptgn/sigmenos.gif?dl=0" class="removeclass" height="42" width="42" ><a href="#" class="removeclass"></a><select class="form-control" name="mytext[]" id="field_'+ FieldCount +'"/><option selected disabled>Opciones</option><option value="Sin Opcion">Sin Opcion</option><option value="1">Opcion 1</option><option value="2">Opcion 2</option><option value="3">Opcion 3</option></select></div>');
        x++; //text box increment

        $("#AddMoreFileId").show();

        $('AddMoreFileBox').html("Add field");

        // Delete the "add"-link if there is 2fields.
        if(x == 2) {
            $("#AddMoreFileId").hide();
            $("#lineBreak").html("<br>");
        }
    }
    return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox

            $("#AddMoreFileId").show();

            $("#lineBreak").html("");

            // Adds the "add" link again when a field is removed.
            $('AddMoreFileBox').html("Add field");
    }
return false;
}) 
});
</script>
1
  • Hola Hernan. No me quedó muy claro qué es lo que estás tratando de hacer, si puedes explicar un poco mejor qué quieres obtener y qué es lo que estás obteniendo quizá pueda ayudarte, saludos. Commented el 18 ago. 2018 a las 23:50

1 respuesta 1

1

Cambia la línea de $(InputsWrapper).append... por:

$(InputsWrapper).append('<div><img src="https://dl.dropboxusercontent.com/s/vaas3wyluypptgn/sigmenos.gif?dl=0" class="removeclass" height="42" width="42" ><a href="#" class="removeclass"></a><select class="form-control" name="mytext[]" id="field_'+ FieldCount +'"><option selected disabled>Opciones</option><option value="Sin Opcion">Sin Opcion</option><option value="1">Opcion 1</option><option value="2">Opcion 2</option><option value="3">Opcion 3</option></select></div>');

Literal te sobra el caracter "/" después de + FieldCount +

1
  • Excelente, gracias
    – Hernan527
    Commented el 19 ago. 2018 a las 0:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.