Selecionar conteúdo a partir da id do option

[Teteu Six 4]

Olá, estou desenvolvendo um site e nele tenho dois conteúdos e preciso que mostre apenas um por vez, quando eu clicar no botão 1 ele deve exibir o conteúdo 1 e a mesma coisa com o conteúdo 2, então fiz assim:

CSS:

.content_slide_02 {
   display: none;
}

 

HTML:

<!-- button 01 -->
<a href=javascript: void(0);" id="select_slide_01">Conteudo_01</a>
<!-- button 02 -->
<a href=javascript: void(0);" id="select_slide_02">Conteudo_02</a>

<div class="content_slide_01">conteudo 01</div>
<div class="content_slide_02">conteudo 02</div>

 

jQuery:

   <script>
   jQuery(document).ready(function(){
       jQuery('#select_slide_01').click(function() {
           jQuery('.content_slide_01').slideDown('slow');
           jQuery('.content_slide_02').slideUp('fast');
       });

       jQuery('#select_slide_02').click(function() {
           jQuery('.content_slide_02').slideDown('slow');
           jQuery('.content_slide_01').slideUp('fast');
       });

   });
   </script>

 

Mas eu precisei trocar os botões por <select> e <option>, só alterei o html:

Antes:

<!-- button 01 -->
<a href=javascript: void(0);" id="select_slide_01">Conteudo_01</a>
<!-- button 02 -->
<a href=javascript: void(0);" id="select_slide_02">Conteudo_02</a>

<div class="content_slide_01">conteudo 01</div>
<div class="content_slide_02">conteudo 02</div>

Depois:

<form id="form_search_property_category" name="form_search_property_category" method="post" action="">
   <select name="category" id="category" class="input_style select_size_02">
       <option id="select_slide_01" value="Apartamento">Apartamento</option>
       <option id="select_slide_02" value="Casa">Casa</option>
   </select>
</form>
<div class="content_slide_01">conteudo 01</div>
<div class="content_slide_02">conteudo 02</div>

 

Deu certo, mas apenas no FF, já nos demais ele não tinha ação.

Obs: No projeto eu tenho sete <option>, mas eu coloquei apenas dois, por que resolvendo dois eu já consigo o resto.

 

Desde á, muito obrigado!

[William Bruno 1501]

Faça com base nisso:

http://wbruno.com.br/2010/07/28/ocultarmostrar-elementos-apartir-de-radio-select/

[Diego L.L. 2]

Bom, eu não recomendaria esta forma que você está usando para alternar entre os conteudos, eu recomendo o uso de ajax, mas caso haja necessidade de manter a forma que você está trabalhando o código ficaria mais ou menos assim:

 

$(function() {
$('#category').on('change', function() {
	if($(this).is('#select_slide_01')) {
		$('.content_slide_01').slideDown('slow');
		$('.content_slide_02').slideUp('fast');
	} else if($(this).is('#select_slide_02')) {
		$('.content_slide_02').slideDown('slow');
		$('.content_slide_01').slideUp('fast');
	}
});
});

 

Obs:

1 - Se você estiver usando a biblioteca jquery em uma versão inferior a 1.7 troque o método on() por bind()

2 - Nunca use o evento click no elemento <option>, sempre anexe o evento change ao superior <select>

3 - Se você mudar de ideia e resolver aperfeiçoar o script eu recomendo que no atributo value dos <option> você coloque endereços pra diferentes páginas contendo os conteudos, anexe o mesmo evento change no <select> e faça uma requisição ajax baseando a url no value da opção selecionada.

 

Espero ter ajudado...