0

Pessoal eu estou tentando copiar as opções de um select para outro usando o change, mas ao copiar está passando o valor da opção que selecionei e o texto de todas as opções do select ao mesmo tempo, estou passando a imagem de como está no console para vocês terem uma ideia.

Meu código está assim:

'''

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  type="text/css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"  type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"                    type="text/javascript"></script>

<div class="form-group row">
    <div class="col-md-6">
        <label for="clienteDisponivel"><strong>Clientes Encontrados</strong></label>
        <select name="clienteDisponivel" id="clienteDisponivel" class="custom-select custom-select-sm mb-3" multiple="multiple" size="5" required>
            <cfif qBuscarClientes.RecordCount>
                <cfloop query="qBuscarClientes">
                    <option value="#qBuscarClientes.Id#">#qBuscarClientes.Nome#</option>
                </cfloop>
            </cfif>
        </select>
    </div>
    <div class="col-md-6">
        <label for="clienteSelecionado"><strong>Pedidos Selecionados</strong></label>
        <select name="clienteSelecionado" id="clienteSelecionado" class="custom-select custom-select-sm mb-3" multiple="multiple" size="5" required>
        </select>
    </div>
</div>
<script>
    function addOption(origem,destino,valor,texto){
        $("#"+destino).append('<option value="'+valor+'">'+texto+'</option>');
        $("#"+origem+" option[value='"+valor+"']").remove();
        ordenarOptions(origem);
        ordenarOptions(destino);
    }
    $(function(){
        $("#clienteDisponivel").on("change",function(){
            var valor   = $(this).val(),
                texto   = $(this).text(),
                opt     = "";
            addOption("clienteDisponivel","clienteSelecionado",valor,texto);
            /*opt = $(this).clone(true).attr("selected","selected");
            $("#clienteSelecionado").append(opt);*/
        });
    });
</script>

'''

E o resultado está assim:

inserir a descrição da imagem aqui

Alguém tem alguma ideia?

1 Resposta 1

0

mexendo aqui eu consegui resolver o problema da seguinte forma.

'''

function ordenarOptions(obj) { 
    var options = $("#"+obj+" option"); 
    
    options.sort(function(a, b) { 
        var at = $(a).text(); 
        var bt = $(b).text(); 
        return (at > bt) ? 1 : ((at < bt) ? -1 : 0); 
    }); 
    options.appendTo("#"+obj); 
}
$(function(){
    $("#clienteDisponivel").on("change",function(){
        $("#clienteSelecionado").append($("#clienteDisponivel option:selected").clone(true));
        $("#clienteDisponivel option:selected").remove();
        ordenarOptions("clienteDisponivel");
        ordenarOptions("clienteSelecionado");
    });
    $("#clienteSelecionado").on("change",function(){
        $("#clienteDisponivel").append($("#clienteSelecionado option:selected").clone(true));
        $("#clienteSelecionado option:selected").remove();
        ordenarOptions("clienteDisponivel");
        ordenarOptions("clienteSelecionado");
    });
});

'''

Não sei se é a melhor, mas funcionou, agora eu passo apena os dados da option que cliquei.

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 .