none
Pegar value de DropDownList com Jquery ou Javascript. RRS feed

  • Pergunta

  • Ola pessoal,

    To com o seguinte problema,

    Tenho dois DropDownList, o que preciso fazer é quando selecionar um determinado valor em um dos DropDownList, remover um dos valores do outro.

    Ate ae tudo bem eu conseguir fazer.

    So que quando seleciono outro valor no DropDown tenho que colocar o valor removido novamente no outro.

    Tava pessando em antes de remover, guardar todos os valores em um array. pra depois inserir novamente. so que não estou conseguindo fazer.

    Fiz um código pra e vcs terem uma noção do que to falando.

    <div id="container">
        <div id="">
            <asp:DropDownList ID="ddl1" runat="server">
                <asp:ListItem Value="0" Text="Valor1"></asp:ListItem>
                <asp:ListItem Value="1" Text="Seleciona este"></asp:ListItem>
                <asp:ListItem Value="2" Text="Valor3"></asp:ListItem>
                <asp:ListItem Value="3" Text="Valor4"></asp:ListItem>
            </asp:DropDownList>
        </div>
        <div id="">
            <asp:DropDownList ID="ddl2" runat="server">
                <asp:ListItem Value="0" Text="Normal"></asp:ListItem>
                <asp:ListItem Value="1" Text="Remove Este"></asp:ListItem>
            </asp:DropDownList>
        </div>
    </div>


    • Editado EDUARDO.NS.NUNES sexta-feira, 4 de maio de 2012 01:00 Alteração no código
    sexta-feira, 4 de maio de 2012 00:58

Respostas

  • Segue abaixo a solução:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var removido = false;
    
                $ddl1 = $('select[id*="ddl1"]');
    
                $ddl1.change(function () {
                    if ($('[id*="ddl1"] option:selected').val() == '1') {
    
                        if (!removido) {
                            $ddl2 = $('select[id*="ddl2"]');
                            $ddl2.find("option[value='1']").remove();
                            removido = true;
                        }
    
                    } else {
                        if (removido) {
                            var opcoes = {
                                1: 'Remove Este'
                            };
    
                            $ddl2 = $('select[id*="ddl2"]');
                            $.each(opcoes, function (val, text) {
                                $ddl2.append(
                                    $('<option></option>').val(val).html(text)
                                );
                            });
                            removido = false;
                        }
                    }
                });
            });        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="container">
            <div id="">
                <asp:DropDownList ID="ddl1" runat="server">
                    <asp:ListItem Value="0" Text="Valor1"></asp:ListItem>
                    <asp:ListItem Value="1" Text="Seleciona este"></asp:ListItem>
                    <asp:ListItem Value="2" Text="Valor3"></asp:ListItem>
                    <asp:ListItem Value="3" Text="Valor4"></asp:ListItem>
                </asp:DropDownList>
            </div>
            <div id="">
                <asp:DropDownList ID="ddl2" runat="server">
                    <asp:ListItem Value="0" Text="Normal"></asp:ListItem>
                    <asp:ListItem Value="1" Text="Remove Este"></asp:ListItem>
                </asp:DropDownList>
            </div>
        </div>
        </form>
    </body>
    </html>
    


    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    sexta-feira, 4 de maio de 2012 13:48

Todas as Respostas

  • Creio que este seja o comando que você procura:

    document.getElementById('ddl1').checked

    sexta-feira, 4 de maio de 2012 02:04
  • Opa, não é bem isso que preciso.

    Olha o que eu fiz.

    Quando eu seleciono o valor2 do ddl1 é pra ele remover o valor2 do ddl2. o que esta feito deve funcionar.

    So que quando eu selecionar o valor1 do ddl1 e pra ele incluir novamente o valor2 do ddl2.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>DropDownList</title>
        <script type="text/javascript">
            function aoAlterar() {            
                var ddl1 = document.getElementById("<%= ddl1.ClientID %>");
    
                if (ddl1.value == 1) {
                    var ddl2 = document.getElementById("<%= ddl2.ClientID %>");                
                    ddl2.remove(ddl2.selectedIndex + 1);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="container">
                <div id="">
                    <asp:DropDownList ID="ddl1" runat="server">
                        <asp:ListItem Value="0" Text="valor1"></asp:ListItem>
                        <asp:ListItem Value="1" Text="valor2"></asp:ListItem>
                        <asp:ListItem Value="2" Text="valor3"></asp:ListItem>
                        <asp:ListItem Value="3" Text="valor4"></asp:ListItem>
                    </asp:DropDownList>
                </div>
                <div id="">
                    <asp:DropDownList ID="ddl2" runat="server">
                        <asp:ListItem Value="0" Text="valor1"></asp:ListItem>
                        <asp:ListItem Value="1" Text="valor2"></asp:ListItem>
                    </asp:DropDownList>
                </div>
            </div>
        </form>
    </body>
    </html>

    sexta-feira, 4 de maio de 2012 02:16
  • Segue abaixo a solução:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var removido = false;
    
                $ddl1 = $('select[id*="ddl1"]');
    
                $ddl1.change(function () {
                    if ($('[id*="ddl1"] option:selected').val() == '1') {
    
                        if (!removido) {
                            $ddl2 = $('select[id*="ddl2"]');
                            $ddl2.find("option[value='1']").remove();
                            removido = true;
                        }
    
                    } else {
                        if (removido) {
                            var opcoes = {
                                1: 'Remove Este'
                            };
    
                            $ddl2 = $('select[id*="ddl2"]');
                            $.each(opcoes, function (val, text) {
                                $ddl2.append(
                                    $('<option></option>').val(val).html(text)
                                );
                            });
                            removido = false;
                        }
                    }
                });
            });        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="container">
            <div id="">
                <asp:DropDownList ID="ddl1" runat="server">
                    <asp:ListItem Value="0" Text="Valor1"></asp:ListItem>
                    <asp:ListItem Value="1" Text="Seleciona este"></asp:ListItem>
                    <asp:ListItem Value="2" Text="Valor3"></asp:ListItem>
                    <asp:ListItem Value="3" Text="Valor4"></asp:ListItem>
                </asp:DropDownList>
            </div>
            <div id="">
                <asp:DropDownList ID="ddl2" runat="server">
                    <asp:ListItem Value="0" Text="Normal"></asp:ListItem>
                    <asp:ListItem Value="1" Text="Remove Este"></asp:ListItem>
                </asp:DropDownList>
            </div>
        </div>
        </form>
    </body>
    </html>
    


    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    sexta-feira, 4 de maio de 2012 13:48