How to show select option with jquery?

Asked

Viewed 221 times

1

I have a select box that looks like display:none and I want that when I click on a button appears the listing for the user to choose but I am not able to do I would like to be given some lights on how to do.

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>
jquery html

  • What is the element button, or whatever the button is?

  • And the image they contain in each div

  • And what should happen when clicking on each specific image? both show the same select? the content of select mute?

  • the content of select changes I want when clicking on each image shows the list of options

  • And where does this listing come from? server? ajax?

  • Not a select that is in html but this as display:None

  • And where is this select? I see 2 images but only one select.

  • I just put a select to test to see if I can do but I couldn’t and so I want to know an idea of how I can do after the rest of the select I do

  • I won’t answer if your HTML isn’t what you actually use. I need to know the structure to assemble code that will fetch the right select from the DOM by clicking on the right image. Not knowing where the other select is I don’t see how I can help you without confusing you further...

  • edited html now this as I want to use

  • What do you mean "show options list but do not select it""?

  • Yes show only the option listing when you click on a select the options listing appears and I just want it to appear

  • To better understand what I want in this link has there exactly what I want at home you have a select I want to do that way http://themewoop.com/preview/? item=direct_html

  • Refer to the link "Direct wordpress" in the upper left corner?

  • Let’s go continue this discussion in chat.

  • Are you around? Pop to the chat room ^

Show 11 more comments

1 answer

0

You achieve this by seeking div-father and then the 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>

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.