none
JQuery ComboBox RRS feed

  • Pergunta

  • Olá para todos. Preciso de ajuda. :D
    Tenho um comboBox com 2 itens. Ao selecionar o primeiro, um div é carregado, ao selecionar o segundo, outro div é carregado e o anterior fica invisível.
    Alguém pode me ajudar, de preferência que utiliza?
    Obrigado.
    quarta-feira, 16 de dezembro de 2009 16:28

Respostas

  • Um javascript resolve seu problema:

       <script language="javascript" type="text/javascript">    
           function event1()
           {
               document.getElementById('div1').style.display='none';
               document.getElementById('div2').style.display='block';
           }

           function event2()
           {
               document.getElementById('div1').style.display='block';
               document.getElementById('div2').style.display='none';
           }
       </script>


            <select class="ComboBox" name="TipoBusca">
                <option value="1" selected="selected" onclick="event1()">Mês</option>
                <option value="2" onclick="event2()>Período</option>
            </select>
           
            <div id="div1">
                Abrir Div 1
            </div>
           
            <div id="div2">
                Abrir div 2
            </div>


    Se este poste foi útil não deixe de marcalo como tal:

    referencias: http://www.w3schools.com/TAGS/tag_option.asp


    Tiago Novaes (MSP, MCP)- http://www.atitudebrasil.net - Blog: http://www.atitudebrasil.net/blogs/tiagosantos
    • Marcado como Resposta mkoka quarta-feira, 16 de dezembro de 2009 19:37
    quarta-feira, 16 de dezembro de 2009 16:55

Todas as Respostas

  • mkoka,
       Poste ai o trecho de seu código, "Para facilitar seu entendimento" e explique melhor seu problema.

    Tiago Santos
    Tiago Novaes (MSP, MCP)- http://www.atitudebrasil.net - Blog: http://www.atitudebrasil.net/blogs/tiagosantos
    quarta-feira, 16 de dezembro de 2009 16:37
  • <%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %>
    
    <center>
            <label class="TituloPesquisa">Escolha um tipo de busca:</label>
            
            <select class="ComboBox" name="TipoBusca">
                <option value="1" selected="selected">Mês</option>
                <option value="2">Período</option>
            </select>
            
            <div id="1">
                Abrir Div 1
            </div>
            
            <div id="2">
                Abrir div 2
            </div>
    </center>
    O código é simples,  pois estou utilizando MVC e esse é apenas parte da página.
    Bom, quando o usuário selecionar a primeira opção ( "Mês") a div 1 deve aparecer na tela e a 2 ficar invisível, e quando o usuário selecionar a segunda opção ( "Período") a div 1 deve sumir e a div 2 aparecer.
    Basicamente é isso.
    quarta-feira, 16 de dezembro de 2009 16:44
  • Um javascript resolve seu problema:

       <script language="javascript" type="text/javascript">    
           function event1()
           {
               document.getElementById('div1').style.display='none';
               document.getElementById('div2').style.display='block';
           }

           function event2()
           {
               document.getElementById('div1').style.display='block';
               document.getElementById('div2').style.display='none';
           }
       </script>


            <select class="ComboBox" name="TipoBusca">
                <option value="1" selected="selected" onclick="event1()">Mês</option>
                <option value="2" onclick="event2()>Período</option>
            </select>
           
            <div id="div1">
                Abrir Div 1
            </div>
           
            <div id="div2">
                Abrir div 2
            </div>


    Se este poste foi útil não deixe de marcalo como tal:

    referencias: http://www.w3schools.com/TAGS/tag_option.asp


    Tiago Novaes (MSP, MCP)- http://www.atitudebrasil.net - Blog: http://www.atitudebrasil.net/blogs/tiagosantos
    • Marcado como Resposta mkoka quarta-feira, 16 de dezembro de 2009 19:37
    quarta-feira, 16 de dezembro de 2009 16:55
  • Vlw pela ajuda Tiago. Resolvi de forma bem parecisa, porém eu utilizo o onclick na tag select, e criei uma function geral para qualquer option.
    Outro problema que surgiu é quando eu atualizo a página. Inicialmente, a página tem como default o option de valor 1 selecionado, porém, o usuário altera o item selecionado e clica em um botão submit. Ao retornar o feedback eu deixo o item escolhido como selecionado, mas eu precisava mostrar a div do respectivo item. Deu pra entender?
    Eu precisava de algum forma, ao carregar a página, saber qual item está selecionado para habilitar a DIV.
    Obrigado.

    quarta-feira, 16 de dezembro de 2009 19:40
  • Uma gato que se usa muito por ai é adicionar como primeiro elemento de um combo o valor "-- Select --".

    Se isso não resolver só se add um gato. Iniciar o respectivos dives com o valor do primeiro elemento "Server side".
    Tiago Novaes (MSP, MCP)- http://www.atitudebrasil.net - Blog: http://www.atitudebrasil.net/blogs/tiagosantos
    quarta-feira, 16 de dezembro de 2009 20:25
  • <%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %>
    <%="" %>
    <script type="text/javascript">
        $(document).ready(function() {
            
            document.getElementById("TipoBusca" + document.getElementById("ComboBox").selectedIndex).style.display = 'block';
        });
        function displayDiv(id, sel) {
            var div = document.getElementById(id + sel.selectedIndex);
            TipoBusca0.style.display = 'none';
            TipoBusca1.style.display = 'none';
            if (div) div.style.display = 'block';
        }
    
    </script>
    
    <center>
        <label class="TituloPesquisa">Escolha um tipo de busca:</label>
            
        <%=Html.ComboBox(New String() {"Mês", "Período"}, "TipoBusca", "ComboBox", ViewData("TipoBuscaSelecionado"))%>
    
        <div id="content">
    	    <div id="TipoBusca0" style="display:none;">
    	        <%Using Html.BeginForm()%>
    	            <%=Html.Hidden("TipoPesquisa", 1)%>
    	            <%Html.RenderPartial("StatusMensagem")%>
    	            <%Html.RenderPartial("PesquisaMes")%>
    	        <%End Using%>
    	    </div>
    	    <div id="TipoBusca1" style="display:none;">
    	        <%Using Html.BeginForm()%>
    	            <%=Html.Hidden("TipoPesquisa", 2)%>
    	            <%Html.RenderPartial("StatusMensagem")%>
    	            <%html.renderPartial("PesquisaPeriodo") %>
                <%End Using%>
    	    </div>
        </div>    
    </center>
    No Firefox não funciona, parece que o Javascript não é executado ou a alteração do display não funciona.
    quinta-feira, 17 de dezembro de 2009 11:17
  • Eu coloquei vários alerts e acabei descobrindo, eu acho ser esse o problema, que os comandos

    TipoBusca0.style.display =

    "none";

    não funciona no firefox. Alguém sabe me dizer um comando compatível que funcione nos principais navegadores?

    Obrigado.

    quinta-feira, 17 de dezembro de 2009 11:22
  • Bom, troquei o TipoBusca0 por content.betelementbyid passando tipobusca0 e funcionou. vlw :D

    quinta-feira, 17 de dezembro de 2009 11:26