7

Eu tenho um problema parecido com o desse : Inserir texto - Stack

Mas no meu caso eu preciso do código em JavaScript puro e não tenho a menor idéia (novato em prog. web) de como mudar do jQuery que deram como resposta.

jQuery:

$('.botao_add').click(function(){
    $(this).parent().children('select').append($('<option>', {
    value: $(this).parent().children('input:first').val(),
    text: $(this).parent().children('input:first').val()}));
});

$('.botao_del').click(function(){
    $(this).parent().children('select').children('option:selected').each(function() {
        $(this).remove();
    });
});

Como esse trecho ficaria em JavaScript puro? E como verificar de alguma maneira, mesmo em jQuery, se o dado inserido no input já foi inserido na box?

11
  • 3
    Não acho o certo alguém te dar o código pronto, o mais legal seria você aprender o JS e conseguir fazer por si só. De uma estudada em JS no Codeacademy, é super interativo e fácil. Depois de 30 minutos você já vai conseguir fazer seu próprio código. codecademy.com/pt/tracks/javascript Commented 8/08/2014 às 12:37
  • 5
    O site You Might Not Need jQuery contém informações sobre como fazer muitas coisas com Javascript puro. Tem um slider para você escolher se quer ver a versão IE8+, IE9+ ou IE10+
    – user7261
    Commented 8/08/2014 às 12:50
  • 1
    Depois que conheci o jquery não quero nem ver js puro na minha frente, no tópico que você citou tem alguns exemplos em js puro, e você pode notar que é muito mais complicado, mas o que te impede exatamente de usar o jquery? Commented 8/08/2014 às 14:41
  • 1
    @Jader oque me impede de usar o jquery é o meu superior, pois ele acha que é uma forma muito "complexa"!
    – Bruno
    Commented 8/08/2014 às 15:24
  • 1
    Estou meio sem tempo para fazer isso agora, mas a primeira coisa que eu perguntaria, caso pudesse te ajudar, seria: precisa de compatibilidade com browsers legados, ou pode ser HTML5? Com HTML5 fica bem fácil fazer muitas coisas do jQuery. Commented 8/08/2014 às 16:47

3 Respostas 3

8

Considerando que:

  1. O próprio jQuery, pelo menos na versão 2, não oferece suporte aos browsers bem antigos;

  2. O IE6, IE7 e até o IE8 estão cada dia mais raros;

  3. O trabalho para tornar o código realmente compatível com estas relíquias exige uma boa dose de trabalho, que pode ser inclusive bem instrutivo para você;

Eu apresento a "tradução" a seguir, que testei apenas no Chrome. O objetivo foi apenas transcrever, literalmente, instrução por instrução do jQuery para um JavaScript simples. Resolvi não utilizar recursos das versões mais recentes, como o querySelector e o querySelectorAll, e também não me preocupei em otimizar nem validar nada. Com o código em mãos, você poderá, então, estudar os bugs que ocorram nos browsers em que você testar e, então, editar a resposta com as soluções.

window.addEventListener("load", function() {
    var botoes_add = document.getElementsByClassName("botao_add");
    for(var i = 0; i < botoes_add.length; i++){
        botoes_add[i].addEventListener("click", function(){
            var selects = this.parentElement.getElementsByTagName("select");
            var input_first = this.parentElement.getElementsByTagName("input")[0];
            for(var j = 0; j < selects.length; j++){
                var novo_option = document.createElement("option");
                novo_option.value = input_first.value;
                novo_option.innerHTML = input_first.value;
                selects[j].appendChild(novo_option);
            }
        });
    }
    var botoes_del = document.getElementsByClassName("botao_del");
    for(var i = 0; i < botoes_del.length; i++){
        botoes_del[i].addEventListener("click", function(){
            var selects = this.parentElement.getElementsByTagName("select");
            for(var j = 0; j < selects.length; j++){
                var options = selects[j].getElementsByTagName("option");
                for(var k = 0; k < selects[j].children.length; k++){
                    if(selects[j].children[k].selected) selects[j].removeChild(selects[j].children[k]);
                }
            }
        });
    }
});

Pelo menos no Chrome 36.0.1985.125 para Linux, no qual testei, tenho certeza que a funcionalidade é idêntica ao jsFiddle que você citou.

Edit: esqueci de colocar o meu pŕoprio jsFiddle, e de dizer que o innerHTML foi escolhido ao invés do innerText para permitir a compatibilidade com o Firefox.

Espero que sirva como um primeiro passo para você.

Abraços!

2
  • 1
    +1 pelo esforço que você colocou nesse post. Adoraria dar outro +1 pelo comentário sobre ser instrutivo. Commented 8/08/2014 às 20:14
  • Valeu, @Renan! Tendo algo para acrescentar ou percebendo algum deslize, não só você como todo mundo, pode se sentir livre para editar :D Commented 8/08/2014 às 20:17
1

Uma maneira mais simples para o seu problema:

function move(Origem, Destino)
{
    var opt = document.createElement("option"); 
    var valor = Origem.value;
    if(valor==""){
        alert("Informe um dado válido!"); 
        return;
    }

    opt.text = valor ;
    opt.value = valor ;
    Destino.options.add(opt);
 }

function tira(Destino)
{
    var i;
    for(i = 0; i < Destino.options.length; i++)
    { 
        if (Destino.options[i].selected && Destino.options[i].value != "")
        {
            valor=Destino.options[i].value;
            Destino.remove(Destino.selectedIndex);
        }
    }
}
0

acho q se tu baixar a versão de desenvolvimento do jquery e pesquisar o que faz cada função tu consegue entender, até porque jquery é feito em puro js, ele é apenas uma biblioteca enorme com varias funções.

Exemplo de um código "nao jquery" que simula o seletor $ jquery em js puro.

html

<p id="ha">lalala</p>

js

function $(par) {
    re = /^[.#]/;
    if (re.test(par)) {
        return document.querySelector(par);
    } else {
        return document.querySelectorAll(par);
    }
}

console.log($("#ha").id);

ou

(function (window) {
    function $(par) {
        re = /^[.#]/;
        if (re.test(par)) {
            return document.querySelector(par);
        } else {
            return document.querySelectorAll(par);
        }
    }

    window.$ = $;
})(window);

console.log($("#ha").id);

output

ha

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .