JQuery ComboBox

Question

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.

Answer 1

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

Answer 2

<%@ 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.

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

<%@ 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.

Answer 7

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.

Answer 8

Bom, troquei o TipoBusca0 por content.betelementbyid passando tipobusca0 e funcionou. vlw :D