Click the div to open option

Asked

Viewed 59 times

0

I have a div selectClick, and I’d like when I click on it to open up an option that’s below. The way I’m doing it’s not working.

$('li div.selectClick').click(function() {
  $(".div-select select").slideDown('slow');
})
.div-select { width:215px; display: none; }
.div-select select {
    background: /*url(/assets/images/arrow-down.png)*/ no-repeat #1b4b93;
    background-position: 205px center;
    width: 215px;
    height: 60px;
    font: 200 10px/10px 'Montserrat', Arial, Helvetica, sans-serif;
    padding:13px 20px 13px 12px;
    color:#fff;
    text-indent: 0.01px;
    text-overflow: "";
    select::-ms-expand {display: none;}
}
<li>
  <div class="selectClick">Ver todas linhas</div>
  <div class="div-select">
    <select>
				<option>Ver todas as linhas</option>
				<option>Primeira opção</option>
				<option>Segunda opção</option>
				<option>Terceira opção</option>
				<option>Quarta opção</option>
			</select>/posts/237641/edit#
  </div>
</li>

jquery

  • Are you wanting to show the select options when clicking on the div? That’s it?

  • @Juniornunes that’s right

  • I don’t think that’s possible, take a look here

  • @Juniornunes wanted when I clicked on the div he would show the options.

  • What you can do is take the options from select and show them in some way, now show the options within select "it is not possible"

4 answers

3


Normally that’s not possible, but like everything else in life, you can do it in some way, Take a look at the bottom section, I think there must be some other way, but that’s the only way I could think:

$(document).on('click','.selectClick',function(){
   var $sel = $('select');
   $sel.show();
   $sel[0].size=5;
});

$(document).on('click','.select',function(){
   var $sel = $(this);
   $sel[0].size=1;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <div class="selectClick">Ver todas linhas</div>
  <div class="div-select">
    <select class='select'>
				<option>Ver todas as linhas</option>
				<option>Primeira opção</option>
				<option>Segunda opção</option>
				<option>Terceira opção</option>
				<option>Quarta opção</option>
			</select>
  </div>
</li>

1

Change your JS to this:

$(document).on('click', '.selectClick',function(event) {
$('.select').slideDown('slow');    
});​

1

See if that’s what you want:

$('li div.selectClick').click(function() {
  $(".div-select").slideDown('slow');
})
.div-select { width:215px; display: none; }
.div-select select {
    background: /*url(/assets/images/arrow-down.png)*/ no-repeat #1b4b93;
    background-position: 205px center;
    width: 215px;
    height: 60px;
    font: 200 10px/10px 'Montserrat', Arial, Helvetica, sans-serif;
    padding:13px 20px 13px 12px;
    color:#fff;
    text-indent: 0.01px;
    text-overflow: "";
    select::-ms-expand {display: none;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <div class="selectClick">Ver todas linhas</div>
  <div class="div-select">
    <select>
				<option>Ver todas as linhas</option>
				<option>Primeira opção</option>
				<option>Segunda opção</option>
				<option>Terceira opção</option>
				<option>Quarta opção</option>
			</select>
  </div>
</li>

0

Buddy, like the guys said, it’s not possible with just jQuery... I recommend you to use some library for this, for example the Select2 (https://select2.org/), that way it gets easy:

Add the css:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

And the JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Then your script goes like this:

    $('#mySelect').select2();
    $('li div.selectClick').click(function() {
        $('#mySelect').select2('open');
    });

Just don’t forget to put an ID pro seu select, there in case I put "mySelect"

Browser other questions tagged jquery

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