0

Sobre los items existentes, ¿de qué manera podría añadir alguno nuevo (valor nuevo, contenido nuevo y posición) introduciendo datos en estos campos y al hacer click sobre "nuevo item"? Solo he conseguido añadirlos al option "manualmente", pero no de esta forma que se me pide (la función es la última, newItem())

introducir la descripción de la imagen aquí

/*****************************************************************************************************************************************************************************************************************************************************************************************************************************************/

 <!DOCTYPE html>
    <html><head>
    <meta charset=utf-8 />
    <title>JS DOM - Eliminar elementos del DOM</title>
    </head>
    <body>

    <form>
    <select id="colorSelect">
    <option value=”1”>Uno</option>
    <option value=”2”>Dos</option>
    <option value=”3”>Tres</option>
    </select>
    <a href="javascript:delItemSelected()">Elimina el item seleccionado</a>
    <a href="javascript:delAllItems()">Vacía el desplegable</a>
    <a href="javascript:resetItems()">Reset desplegable</a>
    <hr>
    Valor: <input type="text" name="valor_nuevo" value="">
    Contenido: <input type="text" name="contenido_nuevo" value="">
    Posición: <input type="text" name="posicion" value="">
    <a href="javascript:newItem()">Nuevo item</a>
    </form>

    <script>

    function delItemSelected(){
        var seleccionado=document.getElementById("colorSelect");
        seleccionado.remove(seleccionado.selectedIndex);
    }

    function delAllItems(){
        var borrarTodos=document.getElementById("colorSelect");
        var elementos=3;
        for(var i=0;i<elementos;i++){
            borrarTodos.remove(elementos.selectedIndex);
        }
    }

    function resetItems(){
        var borrarTodos=document.getElementById("colorSelect");
        var elementos=3;
        for(var i=0;i<elementos;i++){
            borrarTodos.remove(borrarTodos.selectedIndex);
        }

        var arrayVacio=[];

        for(var i=0;i<3;i++){
            arrayVacio[i]=document.createElement("option");
        }

        for(var i=0;i<3;i++){
            switch(i){
                case 0: arrayVacio[i].innerHTML="Uno";
                break;
                case 1: arrayVacio[i].innerHTML="Dos";
                break;
                case 2: arrayVacio[i].innerHTML="Tres";
                break;
            }
            borrarTodos.appendChild(arrayVacio[i]);
        }
    }

    function newItem(){
        var nuevo=document.createElement("option");
var option=document.createTextNode("Cuatro");
    /*var option=document.getElementsByName("contenido_nuevo")[0].value;
    document.getElementById("colorSelect").innerHTML=option;*/
    nuevo.appendChild(option);
    document.getElementById("colorSelect").appendChild(nuevo);

    }


    </script>

    </body>
    </html>

1 respuesta 1

0

Siguiendo la tónica de programa, necesitas manipular el DOM directamente y crear nodos.

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form id="form">
        <select id="colorSelect">
            <option value=”1”>Uno</option>
            <option value=”2”>Dos</option>
            <option value=”3”>Tres</option>
        </select>
        <a href="javascript:delItemSelected()">Elimina el item seleccionado</a>
        <a href="javascript:delAllItems()">Vacía el desplegable</a>
        <a href="javascript:resetItems()">Reset desplegable</a>
        <hr>
        Valor: <input type="text" name="valor_nuevo" value="">
        Contenido: <input type="text" name="contenido_nuevo" value="">
        Posición: <input type="text" name="posicion" value="">
        <input type="submit" value="Añadir elemento">
    </form>
    <script>

        function delItemSelected() {
            var seleccionado = document.getElementById("colorSelect");
            seleccionado.remove(seleccionado.selectedIndex);
        }

        function delAllItems() {
            var borrarTodos = document.getElementById("colorSelect");
            var elementos = 3;
            for (var i = 0; i < elementos; i++) {
                borrarTodos.remove(elementos.selectedIndex);
            }
        }

        function resetItems() {
            var borrarTodos = document.getElementById("colorSelect");
            var elementos = 3;
            for (var i = 0; i < elementos; i++) {
                borrarTodos.remove(borrarTodos.selectedIndex);
            }

            var arrayVacio = [];

            for (var i = 0; i < 3; i++) {
                arrayVacio[i] = document.createElement("option");
            }

            for (var i = 0; i < 3; i++) {
                switch (i) {
                    case 0: arrayVacio[i].innerHTML = "Uno";
                        break;
                    case 1: arrayVacio[i].innerHTML = "Dos";
                        break;
                    case 2: arrayVacio[i].innerHTML = "Tres";
                        break;
                }
                borrarTodos.appendChild(arrayVacio[i]);
            }
        }

        document.getElementById('form').addEventListener('submit', function (e) {
            e.preventDefault()
            const select = this.colorSelect

            const value = this.valor_nuevo.value
            const content = this.contenido_nuevo.value
            const position = this.posicion.value

            const el = createNodeOption(value, content)
            select.insertBefore(el, select.childNodes[position]); 
        })

        function createNodeOption(value, content) {
            const el = document.createElement('option')
            el.setAttribute('value', value)
            el.text = content
            return el
        }
    </script>
</body>

</html>

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.