Click on the div open option

Question

Click on the div open option

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

0

I have a selectClick div and would like it when I clicked on it, open an option below. The way I'm doing is 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>https://pt.stackoverflow.com/posts/237641/edit#
  </div>
</li>

jquery

asked by anonymous 15.09.2017 / 14:59

4 answers

1

Change your JS to this:

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

15.09.2017 / 15:11

1

See if this is 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><divclass="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>

15.09.2017 / 15:18

0

Friend, as the folks said, it's not only possible with jQuery ... I recommend you to use some library for this, for example Select2 ( link ), this way it is easy:

Add 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>

Thenyourscriptlookslikethis:

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

JustdonotforgettoputaproIDonyourselect,inthatcaseIput"mySelect"

15.09.2017 / 15:27

Randomly generated list Change the background of the site daily automatically

score 3 · Accepted Answer

Normally this is not possible, but like everything else in life, you can do it somehow, take a look at the section below, I think there should be some other way, but that was the only one I could think of:

$(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><divclass="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>