Abrir div dentro de option

[Carlos Rocha]

Pessoal.

Nesse site: http://www.minhaprimeiracasa.com.br/, tem um sistema de busca rápida na pagina inicial.

Nessa busca, tem o campo Dormintórios que é um select options.

Esse select, quando é aberto as options (clika sobre a seta), em vez de sair uma lista de options, é aberta, em cima desta lista de options, uma div. Acontece, que essa div sobrepoe à lista de options(só tem um option lá).

Como eu faço para:

1) Sobrepor a div à lista de option?

2) Quando clikar na seta do select, uma vez que a lista de options (no caso a div) estiver aberta, fechá-la?

Obrigado a quem puder ajudar.

Carlos Rocha

[Roger Mauricio Takemiya]

Primeiro problema... que eu acho está mais ligado a CSS.. não sei se vai dar certo também =S

na div que contem o nosso select, ela está com z-index: 998;

porém, na div que ocupa o espaço das nossas options.. z-index: 999;

Dá uma olhada nisso se você n sabe o que é z-index..

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Acredito que invertendo os valores do z-index.. as options irão sobrepor a div? é isso? :P

Já o segundo problema..

<script>

function hideDiv(id){ 
      var el = document.getElementById(id);
      if(el.style.display == 'block')
           el.style.display = "none";
}

</script>

<select id="img_fto_dor_sel" class="input_text" onclick="hideDiv('parent_d_fto_dor')">
...
</select>

obs. nota que cliquei o evento onclick no select, passando para a função o ID da div, que quero fechar...

Edited March 20, 2012 by Roger Mauricio Takemiya

[Carlos Rocha]

Veja o que fiz e não funcionou:

<label id="label_busca_rapida" for="form_busca_rapida"><h3>Busca Rápida:</h3></label>
  <div id="busca_rapida">
    <form action="busca.php?acao=busca_rapida" method="post" id="form_busca_rapida" onsubmit="return valida_pesquisa_rapida();">
        <label id="label_imovel_tipo" for="select_imovel_tipo">Tipo de Imóvel</label>
        <select id="select_imovel_tipo" onchange="libera_div_quantos_quartos();">
          <option selected="selected" value="#">Escolha o Tipo de Imóvel</option>
          <option value="apartamento">Apartamento</option>
          <option value="casa">Casa</option>
          <option value="chacara">Chácara</option>
          <option value="fazenda">Fazenda</option>
          <option value="kitnet">Kitnet</option>
          <option value="sala">Sala</option>
          <option value="sobrado">Sobrado</option>
          <option value="sobreloja">Sobreloja</option>
          <option value="terreno">Terreno/Lote</option>
          <option value="outros">Outros</option>
        </select><br />
        <div id="div_quantos_quartos" style="display:none;">  
          <div id="div_select_quantos_quartos" style="display:block;z-index:1;">  
            <label id="label_quantos_quartos" for="select_quantos_quartos">Quantos Quartos:</label>
            <select id="select_quantos_quartos"  onFocus="abre('div_quantos_quartos_escolhe')"; onBlur="fecha('div_quantos_quartos_escolhe')"; >
            <option value="#" selected="selected">Tanto Faz!</option>
         </select>          
         </div>
         <div id="div_quantos_quartos_escolhe" style="display:none; z-index:2;">  
            <p style="border-bottom: 1px solid #cacaca">
               <label id="label_quantos_quartos_escolhe">SELECIONE:</label>
               <a href="java script:void(null);"><img src="img/ok.gif" /></a><br />
               <input type="checkbox" id="marca_todos_quartos" value="" onclick="marcar_todos_quartos();" />Marcar todos
            </p>
            <ul id="marca_quartos" style="list-style:none">
               <li><input type="checkbox" id="marca_quartos1" name="quartos[]" value="1" /> <span>1 Quarto</span> </li>
               <li><input type="checkbox" id="marca_quartos2" name="quartos[]" value="2" /> <span>2 Quartos</span> </li>
               <li><input type="checkbox" id="marca_quartos3" name="quartos[]" value="3" /> <span>3 Quartos</span> </li>
               <li><input type="checkbox" id="marca_quartos4" name="quartos[]" value="4" /> <span>4 Quartos</span> </li>
               <li><input type="checkbox" id="marca_quartos5" name="quartos[]" value="5" /> <span>5 ou mais Quartos</span> </li>
            </ul>
          </div>
        </div>
    </form>
  </div>

A <div id="div_quantos_quartos_escolhe"..> deve sobrepor à <div id="div_select_quantos_quartos" style="display:block;z-index:1;"> quando a seta do <select......> for acionada. Isso, esta acontecendo. A div esta se abrindo normal. Porem, o select não esta sendo sobreposto.

Veja em http://www.dinamicaimoveis.com.br/novo

Na paste da busca, escolha nos tipos de imoveis, casa ou apartamento e vai abrir a div da quantidade de quartos. Quando voce clikar na seta, a lisa de opçoes vai aparecer mas não vai sobrepor à select. E é exatamente isso que eu preciso.

Tentei position:absolute ma não deu

[Carlos Rocha]

Talvez esteja mais para CSS que JavaScript. Se for esse o caso, por favor monitor: mova esse tópico para CSS

[Carlos Rocha]

Mas, deixa eu melhorar um pouco mais a compreensão:

Tenho:

uma div id"div_quantos_quartos"

Dentro dela:

uma div id="div_select_quantos_quartos"

Dentro dela

um select id="select_quantos_quartos" com apenas uma option e selected que, ao ser clikado na seta do select, abre a div id="div_quantos_quartos_escolhe" justamente em cima do option que abriu.

uma div id="div_quantos_quartos_escolhe"

Dentro dela

alguns radio buttons com as opçoes de quantidade de quartos

Então: A ideia é fazer a div id="div_quantos_quartos_escolhe" aparecer (e tampar apenas) em cima do option do select. Não sumir com o select todo.

[Carlos Rocha]

ninguém?

[Roger Mauricio Takemiya]

Adicionar essa função em algum lugar acessivel na sua página

<script>
            
                 function hideOptions(){                 
                     var el = document.getElementById("select_quantos_quartos");                
                    el.options[0].style.display = "none";                  
                }
            
</script>

coloca esse evento no onclick do seu select Carlos

onclick="hideOptions()"

Será que é isso q você precisa?

qualquer coisa me manda um email cara

roger_mauricio_5@hotmail.com

Edited March 21, 2012 by Roger Mauricio Takemiya

[Carlos Rocha]

Tentei assim:

// JavaScript Document
function abre_checkbox_pesquisa(div)
{
  if (document.getElementById(div).style.display == 'block')
  {
      document.getElementById(div).style.display = 'none';
  }
  else
  {
      document.getElementById(div).style.display = 'block';
      document.getElementById("select_quantos_quartos").options[0].style.display = "none";    
  }

}

Mas não fechou as options não.

Edited March 21, 2012 by Carlos Rocha