[RESOLVIDO] Remover opções dinamicamente de selects!

6 de novembro de 2012 6 respostas

Nicolas_Fernandes 6 de novembro de 2012

E aí, galerinha do GUJ. Tudo bem?
Preciso fazer remoção de itens de selects dinamicamente, mas não tenho ideia de como começar.
A ideia é:

Eu tenho lá, por exemplo, três selects:

<select id="select1">
  <option value="1">1ª opção</option>
  <option value="2">2ª opção</option>
  <option value="3">3ª opção</option>
  <option value="4">4ª opção</option>
</select>

<select id="select2">
  <option value="1">1ª opção</option>
  <option value="2">2ª opção</option>
  <option value="3">3ª opção</option>
  <option value="4">4ª opção</option>
</select>

<select id="select3">
  <option value="1">1ª opção</option>
  <option value="2">2ª opção</option>
  <option value="3">3ª opção</option>
  <option value="4">4ª opção</option>
</select>

Ao selecionar 1ª opção no select1, queria removê-la dos selects 2 e 3. Se eu selecionar a 2ª opção no select1, gostaria que voltasse a 1ª opção que foi removida. Tô tentando fazer algo desse tipo, mas não tá saindo.

Alguém tem alguma luz aí?
Valeu, galera,
fiquem com Deus! :D

6 Respostas

drsmachado 6 de nov. de 2012

Javascript não ajuda?

Nicolas_Fernandes 6 de nov. de 2012

Ajuda, sim, mas não tô tendo ideia de onde partir, saca? Tá escuro pra mim, ainda. haha

drsmachado 6 de nov. de 2012

Ajuda, sim, mas não tô tendo ideia de onde partir, saca? Tá escuro pra mim, ainda. haha
Que tal fazer um negócio meio antiquado e estudar?
Aqui é um ótimo lugar para começar

Nicolas_Fernandes 6 de nov. de 2012

Ajuda, sim, mas não tô tendo ideia de onde partir, saca? Tá escuro pra mim, ainda. haha
Que tal fazer um negócio meio antiquado e estudar?
Aqui é um ótimo lugar para começar
Obrigado pela dica, mas Javascript eu conheço. Queria uma dica, uma luz, de COMO fazer a situação.

rsmoraes 7 de nov. de 2012

Opa, Bom dia amigo…

Fiz aqui mais ou menos… Você pode melhorar… só fiz pra você ter uma ideia…

Veja se te serve.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script>
	function mudaSelect() {

		if (formSelect.select1.value == 1) {

			formSelect.select2.options[0] = null;
			formSelect.select2.options[1] = null;
			formSelect.select2.options[2] = null;
			formSelect.select2.options[3] = null;

			formSelect.select2.options[0] = new Option("2º opção", "2");
			formSelect.select2.options[1] = new Option("3º opção", "3");
			formSelect.select2.options[2] = new Option("4º opção", "4");

		} else if (formSelect.select1.value == 2) {

			formSelect.select2.options[0] = null;
			formSelect.select2.options[1] = null;
			formSelect.select2.options[2] = null;
			formSelect.select2.options[3] = null;

			formSelect.select2.options[0] = new Option("1º opção", "1");
			formSelect.select2.options[1] = new Option("3º opção", "3");
			formSelect.select2.options[2] = new Option("4º opção", "4");

		}

	}
</script>


</head>
<body>

	<form name="formSelect">
		
                <select id="select1" onchange="mudaSelect();">
			<option value="1">1ª opção</option>
			<option value="2">2ª opção</option>
			<option value="3">3ª opção</option>
			<option value="4">4ª opção</option>
		</select> 

                <select name="select2" id="select2">
			<option value="1">1ª opção</option>
			<option value="2">2ª opção</option>
			<option value="3">3ª opção</option>
			<option value="4">4ª opção</option>
		</select> 

                <select id="select3">
			<option value="1">1ª opção</option>
			<option value="2">2ª opção</option>
			<option value="3">3ª opção</option>
			<option value="4">4ª opção</option>
		</select>

	</form>

</body>
</html>

Nicolas_Fernandes 7 de nov. de 2012

Obrigado pela resposta, rsmoraes. Consegui finalizar a lógica que precisava. Pode não estar "padronizado" ou coisa do tipo, mas, por hora, funciona deste modo:

function contains(valor, array) {

    for (count = 0; count < array.length; ++count) {
        if (array[count] == valor)
            return true;
    }

    return false;
}

function atualizarOpcoesCursos(select, numeroCursosDisponiveis) {

    var virgula = select.val().indexOf(',');
    var valorSelecionado = select.val().substr(0, virgula);
    var cursoSelecionado = select.val().substr(virgula, select.val().length);

    var selecionados = '';
    $("#cursos li select").each(function (i, item) {
        var selecionado = $(item).val().substr(0, $(item).val().indexOf(','));
        if (selecionado != -1)
            selecionados += selecionado + ',';
    });

    var arr = selecionados.split(',');

    $("#cursos li select").each(function (i, item) {

        var virgula = $(item).val().indexOf(',');
        var valor = $(item).val().substr(0, virgula);
        var curso = $(item).val().substr(virgula, select.val().length);

        if ($(item).val() != select.val()) {
            var valorAnterior = $(item).val();

            if (valor == -1) {

                var options = "<option value='-1," + curso + "'></option>";
                for (i = 1; i <= numeroCursosDisponiveis; ++i) {
                    if (valorSelecionado != i && !contains(i, selecionados)) {
                        options += "<option value='" + i + "," + curso + "'>Opção " + i + "</option>";
                    }
                }
                options += "<option value='0," + curso + "'>Não quero</option>";

                $(item).children("option").remove();
                $(item).html(options);
                $(item).val(valorAnterior);
            }
        }
    });
}

Valeu!

Criado 6 de novembro de 2012

Ultima resposta 7 de nov. de 2012

Respostas 6

Participantes 3

6 Respostas

Topicos relacionados