0

Tenho um select box que esta como display:none e quero que ao ao clicar num botão aparece a listagem para o utilizador escolher mas não estou a conseguir fazer gostava que me dessem algumas luzes de como fazer.

HTML

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top">
          <div class="input_home_pequisa">Escolha um distrito 
            <img id="botao_distritos" style="float:right; cursor:pointer; margin-top:4px;" src="img/select_home.png">
            <select style="display:none;" name="teste" id="teste">
              <option value="">teste</option>
            </select>
          </div>
        </td>
        <td valign="top">
          <div class="input_home_pequisa">Escolha um concelho 
            <img id="botao_concelhos" style="float:right; margin-top:4px; cursor:pointer;" src="img/select_home.png">
            <select style="display:none;" name="concelhos" id="concelhos">
              <option value="">teste</option>
            </select>
          </div>
        </td>
        <td valign="top">
          <div class="input_home_pequisa">Escolha uma categoria 
            <img id="botao_categoria" style="float:right; margin-top:4px; cursor:pointer;" src="img/select_home.png">
            <select style="display:none;" name="categoria" id="categoria">
              <option value="">teste</option>
            </select>
          </div>
        </td>
        <td valign="top">
          <div style="margin-top:-5px;">
            <a href="#" class="botao_home_pesquisa"><i class="ico i-search"></i></a>
          </div>
        </td>
    </tr>
</table> 
16
  • Qual é o elemento button, ou seja qual é o botão?
    – Sergio
    Commented 12/05/2015 às 22:32
  • E o a imagem que contem em cada div Commented 12/05/2015 às 22:33
  • E o que deve acontecer qualdo se clica em cada imagem específica? ambas mostram o mesmo select? o conteudo do select muda?
    – Sergio
    Commented 12/05/2015 às 22:37
  • o conteudo do select muda eu quero que ao clicar em cada imagem mostra a listagem dos option Commented 12/05/2015 às 22:38
  • E de onde vem essa listagem? servidor? ajax?
    – Sergio
    Commented 12/05/2015 às 22:39

1 Resposta 1

0

Você consegue isso buscando a div-pai e em seguida o respectivo select:

$(".input_home_pequisa img").on("click", function(){
   $(this).closest('div').find('select').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top">
          <div class="input_home_pequisa">Escolha um distrito 
            <img id="botao_distritos" style="float:right; cursor:pointer; margin-top:4px;" src="https://project-firefly.com/sites/all/themes/project_firefly_2_0/img/header-submit-button.png">
            <select style="display:none;" name="teste" id="teste">
              <option value="">teste</option>
            </select>
          </div>
        </td>
        <td valign="top">
          <div class="input_home_pequisa">Escolha um concelho 
            <img id="botao_concelhos" style="float:right; margin-top:4px; cursor:pointer;" src="https://project-firefly.com/sites/all/themes/project_firefly_2_0/img/header-submit-button.png">
            <select style="display:none;" name="concelhos" id="concelhos">
              <option value="">teste</option>
            </select>
          </div>
        </td>
        <td valign="top">
          <div class="input_home_pequisa">Escolha uma categoria 
            <img id="botao_categoria" style="float:right; margin-top:4px; cursor:pointer;" src="https://project-firefly.com/sites/all/themes/project_firefly_2_0/img/header-submit-button.png">
            <select style="display:none;" name="categoria" id="categoria">
              <option value="">teste</option>
            </select>
          </div>
        </td>
        <td valign="top">
          <div style="margin-top:-5px;">
            <a href="#" class="botao_home_pesquisa"><i class="ico i-search"></i></a>
          </div>
        </td>
    </tr>
</table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .